vue知识点
2018-09-11 本文已影响43人
婲魢銣佌亾荷姒堪
1.三个框架 vue Angular React
vue相对于Angular、react来说是最容易学习的一种框架，vue由个人维护，它是华人尤雨溪创立的。vue的操作元素更方便，简化了DOM的操作。
2.vue的指令
指令1：
循环：v-for
当建立一个新的vue框架时，new Vue 这里vue要注意开头大写，在创建vue框架前要先创建一个选择器来承载，例如：id选择器、class选择器。。
例子1：数组循环
<div class="text">
{{msg}}
<ul>
<li v-for='val in arr'>{{val}}</li>
</ul>
</div>
<script>
new Vue({ //el element的缩写 可以在Vue js里对dom元素进行更改
el:'.text',//只要是选择器皆可 id选择器 class选择器 各种选择器
data:{
msg:'hello vue',
arr:[1,2,3]
}
})
</script>
例子2：table表格
<div id='itany'>
<table border='1' cellspacing='0'>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in arr">
<td>{{index+1}}</td>
<td>{{value.pname}}</td>
<td>{{value.price}}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:'#itany'
data:{
arr:[
{pname:'香蕉',price:3},
{pname:'苹果',price:2},
{pname:'鸭梨',price:1}
]
}
})
</script>
指令2：
表单：v-model
v-model 双向数据绑定，一般用于表单元素 用法：v-model=''值''
例子：输入框内容与显示 同步
<script src="js/vue.js"></script>
<div id="itany">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue'
}
})
</script>
指令3：
事件：v-on
v-on可以用来绑定一个事件 用法：v-on:事件名='函数名'
例子1：鼠标点击按钮 向控制台中输出
<div id='itany'>
<button v-on:click='alt'>按钮</button>
</div>
<script src='js/vue.js'></script>
<script>
var vm=new Vue({
el:'#itany',
data:{
msg:'hello'
},
methods:{
alt:function(){
// alert(000)
// console.log(this.msg);
console.log(vm.msg);
}
}
})
</script>
例子2：鼠标点击 切换文字
<div id='itany'>
<p>{{msg}}</p>
<button v-on:click="chg">按钮</button>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello word',
txt:'hello vue'
},
methods:{
chg:function(){
this.msg=this.txt
}
}
})
</script>
例子3：鼠标点击 来回切换文字
<div id='itany'>
<p>{{msg}}</p>
<button v-on:click="chg">按钮</button>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello word',
// txt:'hello vue',
flag:true
},
methods:{
chg:function(){
// this.msg=this.txt
if(this.flag){
this.msg='hello vue',
this.flag=false
}else{
this.msg='hello word'
this.flag=true
}
}
}
})
</script>
v-model、 v-on 应用
添加列表
<div id='itany'>
<input type="text" v-model='txt'> <button v-on:click='add'>添加</button>
<ul>
<li v-for="(value,index) in arr">
{{value}}
<button v-on:click='delt(index)'>删除</button>
</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
arr:['吃饭','睡觉','打游戏'],
txt:''
},
methods:{
add:function(){
this.arr.push(this.txt),
this.txt=''
},
delt:function(ind){
this.arr.splice(ind,1)
}
}
})
</script>
指令4：
事件：v-bind
v-bind 是用来绑定属性的，它的用法是：v-bind:属性名='事件名'
例子1：点击切换图片（v-on v-bind应用）
<div id='itany'>
<img v-bind:src="url" alt="" v-on:click='chg'>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:"#itany",
data:{
url:'img/1.jpg'
},
methods:{
chg:function(){
this.url='img/2.jpg'
}
}
})
</script>
例子2：点击来回切换图片（v-on v-bind应用）
<script src='js/vue.js'></script>
<div id="itany">
<img v-bind:src="url" v-on:click='alt' alt="">
</div>
<script>
new Vue({
el:'#itany',
data:{
url:'img/1.jpg',
flag:true
},
methods:{
alt:function(){
if(this.flag){
this.url='img/2.jpg';
this.flag=false
}else{
this.url='img/1.jpg';
this.flag=true
}
}
}
})
</script>
例子3：点击编号切换图片（v-for v-on v-bind应用）
head部分
<style>
ul{
overflow: hidden;
}
li{
width:60px;
border:1px solid #000;
float:left;
text-align: center;
list-style: none;
}
</style>
body部分
<div id='itany'>
<img v-bind:src="url" alt="">
<ul>
<li v-for="(value,index) in list" v-on:click='chg(index)'>{{index+1}}</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
url:'img/1.jpg',
// num:[1,2,3,4,5]
list:['img/1.jpg','img/2.jpg','img/3.jpg']
},
methods:{
chg:function(ind){
this.url=this.list[ind]
}
}
})
</script>
第二种写法
head部分
<style>
ul li{
float: left;
list-style: none;
padding: 5px 10px;
border: 1px solid #000;
}
</style>
body部分
<div id="itany">
<img v-bind:src="url" alt="">
<ul>
<li v-for='(value,index) in arr' v-on:click='chg(index)'>{{index+1}}</li>
</ul>
</div>
<script>
new Vue({
el:'#itany',
data:{
url:'img/1.jpg',
arr:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
},
methods:{
chg:function(ind){
this.url=this.arr[ind]
}
}
})
</script>
指令5：
事件：v-show
v-bind 可以控制元素的显示和隐藏，使用display:none;隐藏 用法：v-show=" "
例子1：隐藏
<div id="itany">
<h1>hello world</h1>
<h3 v-show="!see">hello vue</h3>
</div>
<script>
new Vue({
el:'#itany',
data:{
see:true
}
})
</script>
例子2：显示与隐藏
html部分
<style>
#box{
width: 100px;
height: 100px;
background: #54da6f;
}
</style>
body部分
<script src="js/vue.js"></script>
<div id="itany">
<button v-on:click='chg'>点击切换</button>
<div id="box" v-show='see'></div>
</div>
<script>
new Vue({
el:'#itany',
data:{
see:true
},
methods:{
chg:function(){
this.see=!this.see;
}
}
})
</script>
指令6：
事件：v-if
显示与隐藏 同v-show用法一样 使用visibility:hidden;删除 用法：v-if=" "必须和v-if连用 不能单独使用 否则报错
指令7：
事件：v-else
显示与隐藏 用法：v-else='' ''必须和v-if连用
指令8：
事件：v-else-if
用法：v-else='' ''必须和v-if连用
指令9：
事件：v-html
可以解析输入框内输入的标签（能读取html标签）可以双向绑定 用法：v-html=' '
<div id="app">
<input type="text" v-model='msg'>
<p v-html='msg'>{{msg}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'hello vue'
}
})
</script>
指令10：
事件：v-text
可以解析文本 不能解析标签（ v-text读取文本不能读取html标签）可以双向绑定 用法：v-text=' '
<div id="app">
<input type="text" v-model='msg'>
<h2 v-text='msg'>{{msg}}</h2>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'hello vue'
}
})
</script>
指令11：
事件：v-once
只绑定一次 只绑定最初的（就是 加载一次 如果用到事件中就是事件只执行一次）用法：直接写 （不需要表达式）
<div id='app'>
<input type="text" v-model='msg'>
<a href="" v-once>{{msg}}</a>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello'
}
})
</script>
指令12：
事件：v-pre
原样输出 （把标签内部的元素原位输出） 用法：直接写 （不需要表达式）
<div id='app'>
<input type="text" v-model='msg'>
<h1 v-pre>{{msg}}</h1>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'hello'
}
})
</script>
</body>
</html>
指令13：
事件：v-cloak
没有编译完不会显示 用法：直接写 （不需要表达式）要和[v-cloak]{display:none;}一起用
html部分
<style>
[v-cloak]{
display:none;
}
</style>
body部分
<div id='app'>
<h1 v-cloak>{{msg}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello vue'
},
beforeMount:function(){
alert('beforeMount')
}
})
</script>
