创建一个Vue实例
var vm = new Vue({
el:'#app',
data:{},
methods:{}
})
在html中完整代码
常用标签用法:v-cloak、v-html、v-bind、v-on
差值表达式和v-cloak
{{}} (差值表达式):
{{msg}}
js代码 :
var vm = new Vue({
el:'#app',
data:{
msg:"Hello world!"
},
methods:{}
})
使用v-cloak:
{{msg}}
区别：v-cloak会屏蔽
标签中的{{msg}}，解决文本闪烁问题。ps:{{}}前后可以自定义文本，且在使用v-cloak后和msg一起显示
测试方法：将vue.js在DOM之后导入，使用live server打开页面，将network调至slow 3G，会发现差值表达式方法的页面会先显示{{msg}}再显示"Hello world!"。
v-html和v-text
v-html：可以识别msg文本中的DOM标签。
v-text：识别纯文本，且只识别msg中的文本，
标签中的文本不会被识别
v-html
var vm = new Vue({
el:'#app',
data:{
msg:"
你好，我在测试v-html的作用
"},
methods:{}
})
v-text
1111111
var vm = new Vue({
el:'#app',
data:{
msg:"
你好，我在测试v-html的作用
"},
})
v-bind
可以绑定属性,可以直接简写为冒号‘:’。下面例子将title属性绑定在mytitle上
var vm = new Vue({
el:'#app',
data:{
mytitle:"这是一个button"
},
})
v-on
给DOM绑定事件。
var vm = new Vue({
el:'#app',
data:{},
methods: {
show: function () {
alert("Hello!");
}
},
})
v-model
实现表单元素和model间的双向绑定,但是v-model只能在表单中使用（ps:v-bind只能实现数据的单向绑定）
{{msg}}
var vm = new Vue({
el:'#app',
data:{
msg:"我是爱学习、爱生活的好学生！"
},
methods:{}
})
在text文本框中输入会改变h1标签的文本，即msg的值通过v-model绑定到了text的输入框上了。
v-if和v-show
v-if特点:每次都会重新创建和删除dom元素 。
v-show特点: 每次不会创建和删除,但改变display的属性。
这是v-if的h1
这是v-show的h1
var vm = new Vue({
el:'#app',
data:{
flag:true
},
methods:{
toggle(){
this.flag = !this.flag;
}
}
})
点击按钮，两个h1都不会在页面显示，使用v-if的dom元素被删除，v-show的dom元素的display属性为none。
v-for
创建一个公用的js文件:
var vm = new Vue({
el:'#app',
data:{
list:[1,2,3,4,5,6,7,8],
list2:[
{id:1,name:'zs1'},
{id:2,name:'zs2'},
{id:3,name:'zs3'},
{id:4,name:'zs4'},
],
user1:{
id : 1,
name:"托尼史塔克",
sex:"男"
}
},
methods:{}
})
1.普通循环
---索引值---{{i}}---数值---{{item}}
2.复杂函数 遍历对象数组
ID:{{user.id}}---名字：{{user.name}}---索引：{{i}}
3.遍历对象
值是：{{val}}---键是：{{key}}--索引{{index}}
4.迭代数字
ps:使用v-for迭代数字，第一个数字从1开始。
这是第{{count}}个数字
v-if和v-else
v-if的值为true则展示绑定了v-if的元素，否则展示绑定了v-else属性的元素。（类似与if....else语句）
可用于两个组件之间的切换。
v-pre
跳过这个元素和它的子元素的编译过程。跳过大量没有指令的节点会加快编译。
{{123}}
会原样输出{{123}}
v-once
只渲染元素和组件一次
{{msg}}
页面第一次渲染完成后，表单里双向绑定的数据msg发生改变后span标签里的展示内容不变