vue - 基础(3)
1.数据的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"> <label for="username">用户名：</label>
<input type="text" id="username" v-model="msg">
<p>{{ msg }}</p>
<textarea name="" id="" v-model="msg"></textarea> <input type="checkbox" id="checked" v-model="checked">
<label for="checked">{{ checked }}</label>
<!--多个复选框 使用列表保存-->
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span> <br>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
<!--懒监听 只有回车之后才会将数据同步-->
<input type="text" v-model.lazy="msg">
<!--数字显示-->
<input type="number" v-model.number="age">
<!--清除前后空格-->
<input type="text" v-model.trim="msg">
</div>
<script src="vue.js"> </script>
<script>
new Vue({
el:"#app",
data(){
return {
msg:"alex",
checked:false,
checkedNames:[],
selected:"",
age:0
}
}
})
</script>
</body>
</html>
双向绑定
2.双向数据绑定实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" :value="msg" @input="changeHandler">
<p>{{ msg }}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return {
msg:'alex'
} },
methods:{
changeHandler(e){
console.log(e);
this.msg = e.target.value
}
}
})
</script>
</body>
</html>
3.局部组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
<script src="vue.js"></script>
<script>
//如果仅仅是实例化vue对象中，既有el又有template，如果template中
//定义模板内容，那么template模板优先级大于el // App header aside content
//1声子 Vue 中组件的名字 首字母大写，跟标签区分 组建中的data必须是一个函数，热切要有return一个对象
let App = {
data(){
return {
text:"日天"
}
},
template:`
<div>
<h2>{{ text }}</h2>
</div>
`,
methods:{ }
}; new Vue({
el:"#app",
data(){
return {
msg:"alex"
}
},
//3用子
template:`
<div class="app">
<App />
</div> `,
components:{
//2挂子
// 如果key和value一样 可以只写一个
// App:App
App
} })
</script>
</body>
</html>
4.局部组件的使用更改（全局组件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
<script src="vue.js"></script>
<script>
//如果仅仅是实例化vue对象中，既有el又有template，如果template中
//定义模板内容，那么template模板优先级大于el //第一个参数是组件的名字，第二个参数 options参数 它是全局组件
//<slot></slot> solt是vue中提供的内容组件 ，它会去分发内容
Vue.component("VBtn",{
data(){
return { }
},
template:`
<button>
<slot></slot>
</button> `
}); // App header aside content
//1声子 Vue 中组件的名字 首字母大写，跟标签区分 组建中的data必须是一个函数，热切要有return一个对象
let Vheader = {
data(){
return { }
},
//template定义模板内容
//Component template should contain exactly one root element
template:`
<div>
<h2>日天</h2>
<h2>日天</h2>
<VBtn>登录</VBtn>
<VBtn>注册</VBtn>
<VBtn>按钮</VBtn>
<VBtn>提交</VBtn>
</div>
`
} let App = {
data(){
return {
text:"日天"
}
},
template:`
<div>
<h2>{{ text }}</h2>
<Vheader></Vheader>
<VBtn>删除</VBtn>
<br>
</div>
`,
methods:{ },
components:{
Vheader
}
}; new Vue({
el:"#app",
data(){
return {
msg:"alex"
}
},
//3用子
template:`
<div class="app">
<App />
</div> `,
components:{
//2挂子
// 如果key和value一样 可以只写一个
// App:App
App
} })
</script>
</body>
</html>
5.父往子传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
<script src="vue.js"></script>
<script>
//如果仅仅是实例化vue对象中，既有el又有template，如果template中
//定义模板内容，那么template模板优先级大于el //第一个参数是组件的名字，第二个参数 options参数 它是全局组件
//<slot></slot> solt是vue中提供的内容组件 ，它会去分发内容
Vue.component("VBtn",{
data(){
return { }
},
template:`
<button>
{{ id }}
</button> `,
props:["id"]
}); // App header aside content
//1声子 Vue 中组件的名字 首字母大写，跟标签区分 组建中的data必须是一个函数，热切要有return一个对象
let Vheader = {
data(){
return { }
},
//template定义模板内容
//Component template should contain exactly one root element
template:`
<div>
<h2>日天</h2>
<h2>{{ msg }}</h2>
<h2>{{ post.title }}</h2>
<VBtn :id="post.id">提交</VBtn>
</div>
`,
props:["msg","post"]
} let App = {
data(){
return {
text:"我是父组件的数据",
post:{
id:1,
title:"My Journey with Vue"
}
}
},
template:`
<div id="a"> <Vheader :msg="text" :post="post"></Vheader> </div>
`,
methods:{ },
components:{
Vheader
}
}; new Vue({
el:"#app",
data(){
return {
msg:"alex"
}
},
//3用子
template:`
<div class="app">
<App />
</div> `,
components:{
//2挂子
// 如果key和value一样 可以只写一个
// App:App
App
} })
</script>
</body>
</html>
6.子往父传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
<script src="vue.js"></script>
<script>
//如果仅仅是实例化vue对象中，既有el又有template，如果template中
//定义模板内容，那么template模板优先级大于el //第一个参数是组件的名字，第二个参数 options参数 它是全局组件
//<slot></slot> solt是vue中提供的内容组件 ，它会去分发内容
Vue.component("VBtn",{
data(){
return { }
},
template:`
<button @click="clickHandler">
{{ id }}
</button> `,
props:["id"],
methods:{
clickHandler(){
this.id++;
// this.$emit('父组件声明自定义的事件','传值');
this.$emit("clickHandler",this.id)
}
}
}); // App header aside content
//1声子 Vue 中组件的名字 首字母大写，跟标签区分 组建中的data必须是一个函数，热切要有return一个对象
let Vheader = {
data(){
return { }
},
//template定义模板内容
//Component template should contain exactly one root element
template:`
<div>
<h2>我是header组件</h2>
<h2>日天</h2>
<h2>{{ msg }}</h2>
<h2>{{ post.title }}</h2>
<VBtn :id="post.id" @clickHandler="clickHandler">提交</VBtn>
</div>
`,
props:["msg","post"],
methods:{
clickHandler(val){
alert(val);
this.$emit("fatherHandler",val)
}
}
} let App = {
data(){
return {
text:"我是父组件的数据",
post:{
id:1,
title:"My Journey with Vue"
}
}
},
template:`
<div id="a"> <Vheader :msg="text" :post="post" @fatherHandler="father_handler"></Vheader> </div>
`,
methods:{
father_handler(val){
this.post.id = val
}
},
components:{
Vheader
}
}; new Vue({
el:"#app",
data(){
return {
msg:"alex"
}
},
//3用子
template:`
<div class="app">
<App />
</div> `,
components:{
//2挂子
// 如果key和value一样 可以只写一个
// App:App
App
} })
</script>
</body>
</html>
7.平行组件传值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<App/>
</div>
<script src="vue.js"></script>
<script>
let bus = new Vue();
//A===》B B要声明事件 $on('事件的名字',function(val){}) A要触发事件 $emit('A组件中声明的事件名','值') //前提 这两个方法必须绑定在同一个实例化对象（bus）
Vue.component('Test2', {
data() {
return {
text:''
}
},
template: `
<h2>{{ text }}</h2>
`,
methods: { },
created(){
bus.$on('testData', (val)=> {
alert(val);
this.text = val;
})
}
})
Vue.component('Test', {
data() {
return {
msg: '我是子组件的数据'
}
},
props:['txt'],
template: `
<button @click = 'clickHandler'>{{ txt }}</button>
`,
methods: {
clickHandler() { bus.$emit('testData',this.msg)
}
}
}) let Vheader = {
data() {
return {
txt:'wusir'
} },
template: `
<div class="header"> <Test :txt = 'txt'/>
<Test2 /> </div>
`
}
let App = {
data() {
return {} },
template: `
<div class="app"> <Vheader /> </div>
`,
components: {
Vheader
}
}
new Vue({
el: '#app',
data() {
return {}
},
components: {
App
}
}) </script>
</body>
</html>
vue - 基础(3)的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
随机推荐
- Newcoder 小白月赛20 H 好点
Newcoder 小白月赛20 H 好点 自我感觉不错然后就拿出来了. 读读题之后我们会发现这是让我们求一堆数,然后这些数一定是递减的. 就像这样我们选的就是框起来的,然后我们可以看出来这一定是一个单 ...
- Java高级工程师常见问题
MySQL数据库调优 定位慢查询得到生产环境那些sql语句响应慢,根据执行计划进行分析调优事物管理索引结构(B+树)平衡二叉树.B树.B+树分库分表后,如何解决查询 使用第三方数据库中间件( ...
- 数据库多行数据合并一行（sqlserver、Oracle、Mysql）
我们日常查询数据时,经常会有将查询到的数据按照某一列分组显示(合并多行数据),比如: 表结构: ),coursename )); 需要将以上数据按照用户名分组,所选课程列不同项之间用逗号隔开,在一行中 ...
- SpringBoot 基于web应用开发(请求参数获取，静态资源，webjars)
SpringBoot 基于web应用开发 一.Lombok使用 1.导入依赖库 <dependency> <groupId>org.projectlombok</g ...
- windows环境下 mysql 忘记root密码时的解决办法
1,停止MYSQL服务,CMD打开DOS窗口,输入 net stop mysql 2,在CMD命令行窗口,进入MYSQL安装目录 比如E:\Program Files\MySQL\MySQL Serv ...
- 『optimization 动态规划』
optimization Description \(visit\_world\) 发现有些优化问题可以用很平凡的技巧解决,所以他给你分享了这样一道题: 现在有一个长度为N的整数序列\(\{a_i\} ...
- 【HTML】前台input上传限制文件类型
仅限制xls文件上传 <input id="uploadSkufile" type="file" value="批量导入" style ...
- APUE—UNIX文件系统
在linux系统中——一切都是文件. 1. 磁盘物理结构 磁盘的物理结构如下: 磁盘由很多盘面组成,而盘面上则是由很多同心圆环组成的磁道,每个磁道又被切割成许多扇区.所有磁盘面的同一个磁道构成一个柱面 ...
- winform子窗口与父窗口的交互-使用委托与事件
实现子窗口与父窗口的交互,通过父窗口调用并控制子窗口,子窗口也能控制父窗口,使用委托和事件的方法,可以实现. 1.父窗口调用子窗口,并通过子窗口控制父窗口 新建工程,创建两个窗体 显示子窗体的代 ...
- c#实现串口通信
参考文章:https://www.cnblogs.com/Zed-H/p/8651882.html 利用虚拟串口软件连接两个虚拟串口,如图连接6,7: 打开串口进行通信如下: