vue.js
vue.js网址 cn.vuejs.org
引入vue,js最好放在head标签内,避免抖屏的情况。
<head>
<script src="./vue.js"></script>
</head>
<body>
<div id="id1">hello{{msg}}</div>
</body>
<script>
new Vue({
el:"#id1",
data:{
msg:"hello world"
}
});
</script>
js或jquery都是用dom来操作内容.
vue实例通过标签进行绑定来操作内容.
el代表绑定的元素,#代表id
vue必须实例了某个元素才能操作某个元素内或者说元素使用vue
{{msg}}这种称为插值表达式
挂载点,模板,实例的关系
#id1这里为挂载点
#id1里面的内容为模板
new value({el:"#id1"})为它的实例
也可以这样操作挂载点内的内容
<head>
<script src="./vue.js"></script>
</head>
<body>
<div id="id1"></div>
</body>
<script>
new Vue({
el:"#id1",
telelate:"<h2>{{msg}} world</h2>"
data:{
msg:"hello"
}
});
</script>
以上的这种操作也可以操作挂载点里的内容。
数据,事件和方法
<head>
<script src="./vue.js"></script>
</head>
<body>
<div id="id1">
<div v-text="content"></div>
<div v-html="content"></div>
</div>
</body>
<script>
new Vue({
el:"#id1",
telelate:"<h2>{{msg}} world</h2>"
data:{
msg:"hello",
number:"11"，
content:"<h1>hello</h1>"
}
});
</script>
这里可以用v-text或者v-html来显示h1标签的内容
v-text会进行转义,第一个div会输出h1标签.
v-html不会进行转义,第二个div不会输出h1标签.
绑定事件
<head>
<script src="./vue.js"></script>
</head>
<body>
<div id="id1">
<div v-on:click="clickF">{{content}}</div>
</div>
</body>
<script>
new Vue({
el:"#id1",
data:{
msg:"hello",
number:"11"，
content:"hello"
},
methods:{
clickF:function(){
this.content="world"
}
}
});
</script>
v-on绑定事件也可以使用@
点击事件触发的方法写在methods内
当点击那个绑定的div后触发方法替换内容为world
属性绑定和双向数据绑定
<head>
<script src="./vue.js"></script>
</head>
<body>
<div id="id1">
<div v-bind:title="title">hello world</div>
<input v-model="content" />
<div>{{content}}</div>
</div>
</body>
<script>
new Vue({
el:"#id1",
data:{
title:"this is title"，
content:''
}
});
</script>
v-bind或者:绑定属性
v-bind:title=“title” 这里title变量指的是data里的title变量 里面就是表达式了可以写Js
v-model可以实现双向绑定
当input的值发生改变它绑定的那个content变量的元素的内容也会发生改变
content发生变化,input框内的value也会发生变化
vue中的计算属性和侦听器
**
<head>
<script src="./vue.js"></script>
</head>
<body>
<div id="id1">
姓<input v-model="firstName" />
名<input v-model="lastName" />
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
</body>
<script>
new Vue({
el:"#id1",
data:{
firstName:"",
lastName:"",
count:0
},
computed:{
fullName:function(){
return this.firstName+' ' +this.lastName;
}
},
watch:{
firstName:function(){
this.count++;
},
lastName:function(){
this.count++;
}
}
});
</script>
compute可以用一个属性计算另一个属性得到,
使用它有一个好处,当几个属性没有发生变化时,它会使用上一次的缓存值.
watch定义侦听器
这里当firstName或者lastName发生改变时,count加一.也监听fullName得到同样的结果.
v-if,v-show和v-for指令
<head>
<script src="./vue.js"></script>
</head>
<body>
<div id="id1">
<div v-if="show">hello world</div>
<button @click="clickF">toggle</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
</body>
<script>
new Vue({
el:"#id1",
data:{
show:true,
list:[1,2,3]
},
methods:{
clickF:function(){
this.show=!this.show;
}
}
});
</script>
当点击Button的时候它会删除div标签,再点击的时候又会加入dom内.
那个div的v-if也可以使用v-show
v-show只是会隐藏或者显示标签
v-if会删除或增加标签到dom
v-for循环数据
item循环第一个是1,第二次是2
最好用Key这个属性会增加执行效率,key值每一项都不能相同.
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
