1.v-once:html不会再因为插值的改变改变，也就是之渲染一次，不会随着数据的改变而改变
2. v-for='itme in Array'
3.v-html="":如果插值中还有html标签，要用v-html指令来解析
4.v-text="":数据显示在页面，接受string
5.v-pre:把{{}}不做解析
6.v-cloak：cloak斗篷，再view解析前，有，解析后没有，防止页面闪动
7.v-bind:用于绑定一个或者多个属性值，像另外一个组件传递props值，还需要src、href动态绑定样式类，简写[:src='url']
v-bind:class='{key:value}'value可以是布尔值
*绑定class的方式有两种 对象和数组 数组语法：class=['active','line']
8.绑定样式： v-bind:style={属性名:‘属性值’/变量}/v-bind:style=[元素->在data中定义元素为对象key:value
------------------------------------------------------------------------------------------------------------------
计算属性
1.compute:{} 在某些请况下比较好用，get:function()set function
methons和computed对比特点与优点:1.计算属性在多此调用只需要调用一次，如果计算结果不变，会将计算结果内部缓存，然后呢监听如果结果不变则继续直接
返回结果，不需要计算结果; methods却只要调用对次，效率低。
------------------------------------------------------------------------------------------------------------------
事件监听
1.v-on:简写：@click=’方法‘
传参问题: *事件调用没有参数
*事件定义时候，函数没有括号，但方法本省需要一个参数，这个时候，Vue默认将event传入到浏览器生成的事件
*除了参数还要有event参数，abc event参数时，如果不加括号，默认将第一个参数为event。但是用括号传参数时，要用$event
2.v-on修饰符:
*@click.stop组织冒泡==event.stopPropagation()
*@click.prevent()==event.preventDefault()
*@keyup监听所有案件，keyup.enter监听回车。
*@click.once:事件只能触发一次
------------------------------------------------------------------------------------------------------------------
条件判断:v-if:布尔：决定当前节点是否需要被渲染出来
v-if和v-else
问题描述:在切换输入类型时，原先的input内容依然存在？解释：vue在进行DOM渲染时，由于VUE从性能的角度考虑，会尽可能的复用已经存在元素，而不是重
新渲染 解决:如果不希望input出现重复的问题，可以给input加key，如果key不同，他就不会复用。
虚拟Dom:先将dom节点缓存，是真是dom的映射，然后再将虚拟的dom渲染到浏览器
-------------------------------------------------------------------------------------------------------------------
v-show=true显示，
对比v-if和v-show:v-if再false时，包含v-if的元素就不会包含在dom中,而v-show只是增加display=none,只是不可见。所以在开发时，切换频率高用：
v-show，切换频率少的话，就用v-if
------------------------------------------------------------------------------------------------------------------
v-for:{item in Array} 遍历数组和对象
在使用v-for的时候最好加个key，因为1.和dom的diff算法有关，再虚拟DOM和真实的浏览器的对比，找到不同的，替换。如果没有key，那么就会把对应元素加入
并且依次修改后边的元素，这样子操作的元素就很多，效率很差。如果有key，先会取对比key，会一一对比，那么diff算法就可以通过key来找到目标节点，在正确
的位置插入新节点。即:key可以更加高效的更新DOM节点。
------------------------------------------------------------------------------------------------------------------
v-model 表单数据的双向绑定
原理:1.将数据的值给input的value 2.给input的绑定input事件，监听输入的值，并将这个值再方法中传入参数来赋值给我们的变量。也可以用于texteara
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"> </script>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<div id="app">
<span v-html="url">计数器</span>
<button @click="up">+</button>
<button @click="down">-</button>
<img v-bind:src="uimaUrl" alt="">
<img :src="uimaUrl" alt="">
<h2 v-bind:class="{active:isactive,line:isline}">ss</h2>
<button @click="change()">切换</button>
<h2 :style="{color:color }">111111111</h2>
<!-- 计算属性-->
<h2>{{ totole}}</h2>
<h2>{{ totole}}</h2> <h2>{{ totole}}</h2>
<p v-if="s>90">优秀</p>
<p v-if="s<90">量</p>
<p>--------------------------------------------------------------------------------------------</p>
<p>用户输入案例</p>
<span v-if="isUser"><label for="username">用户账号 </label>
<input type="text" id="username" placeholder="用户账号"></span>
<span v-else><label for="email">用户邮箱 </label>
<input type="text" id="email" placeholder="用户邮箱"></span>
<button @click="change11($event)">切换</button>
<input type="text" v-model="number">{{number}}
</div>
</body>
<script>
// 1.v-once:html不会再因为插值的改变改变，也就是之渲染一次，不会随着数据的改变而改变
// 2. v-for='itme in Array'
// 3.v-html="":如果插值中还有html标签，要用v-html指令来解析
// 4.v-text="":数据显示在页面，接受string
// 5.v-pre:把{{}}不做解析
// 6.v-cloak：cloak斗篷，再view解析前，有，解析后没有，防止页面闪动
// 7.v-bind:用于绑定一个或者多个属性值，像另外一个组件传递props值，还需要src、href动态绑定样式类，简写[:src='url']
// v-bind:class='{key:value}'value可以是布尔值
// *绑定class的方式有两种 对象和数组 数组语法：class=['active','line']
// 8.绑定样式： v-bind:style={属性名:‘属性值’/变量}/v-bind:style=[元素->在data中定义元素为对象key:value
// ------------------------------------------------------------------------------------------------------------------
// 计算属性
// 1.compute:{} 在某些请况下比较好用，get:function()set function
// methons和computed对比特点与优点:1.计算属性在多此调用只需要调用一次，如果计算结果不变，会将计算结果内部缓存，然后呢监听如果结果不变则继续直接
// 返回结果，不需要计算结果; methods却只要调用对次，效率低。
// ------------------------------------------------------------------------------------------------------------------
// 事件监听
// 1.v-on:简写：@click=’方法‘
// 传参问题: *事件调用没有参数
// *事件定义时候，函数没有括号，但方法本省需要一个参数，这个时候，Vue默认将event传入到浏览器生成的事件
// *除了参数还要有event参数，abc event参数时，如果不加括号，默认将第一个参数为event。但是用括号传参数时，要用$event
// 2.v-on修饰符:
// *@click.stop组织冒泡==event.stopPropagation()
// *@click.prevent()==event.preventDefault()
// *@keyup监听所有案件，keyup.enter监听回车。
// *@click.once:事件只能触发一次
// ------------------------------------------------------------------------------------------------------------------
// 条件判断:v-if:布尔：决定当前节点是否需要被渲染出来
// v-if和v-else
// 问题描述:在切换输入类型时，原先的input内容依然存在？解释：vue在进行DOM渲染时，由于VUE从性能的角度考虑，会尽可能的复用已经存在元素，而不是重
// 新渲染 解决:如果不希望input出现重复的问题，可以给input加key，如果key不同，他就不会复用。
// 虚拟Dom:先将dom节点缓存，是真是dom的映射，然后再将虚拟的dom渲染到浏览器
// -------------------------------------------------------------------------------------------------------------------
// v-show=true显示，
// 对比v-if和v-show:v-if再false时，包含v-if的元素就不会包含在dom中,而v-show只是增加display=none,只是不可见。所以在开发时，切换频率高用：
// v-show，切换频率少的话，就用v-if
// ------------------------------------------------------------------------------------------------------------------
// v-for:{item in Array} 遍历数组和对象
// 在使用v-for的时候最好加个key，因为1.和dom的diff算法有关，再虚拟DOM和真实的浏览器的对比，找到不同的，替换。如果没有key，那么就会把对应元素加入
// 并且依次修改后边的元素，这样子操作的元素就很多，效率很差。如果有key，先会取对比key，会一一对比，那么diff算法就可以通过key来找到目标节点，在正确
// 的位置插入新节点。即:key可以更加高效的更新DOM节点。
// ------------------------------------------------------------------------------------------------------------------
// v-model 表单数据的双向绑定
// 原理:1.将数据的值给input的value 2.给input的绑定input事件，监听输入的值，并将这个值再方法中传入参数来赋值给我们的变量。也可以用于texteara
const app=new Vue({
el:'#app',
data:{
isUser:true,
s:70,
res:'',
message:'heelo',
name:'maxuemimg',
url:'<a href="#">dd</a>',
isactive:true,
isline:true,
color:'red',
uimaUrl:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1956622302,1895131241&fm=26&gp=0.jpg',
list:[{
id:'1',
name:'we'
},{
id:'1',
name:'we'
},{
id:'1',
name:'we'
},{
id:'1',
name:'we'
}],
number:0,
},
methods:{
up:function(){
this.number++
},
down:function(){
this.number--
},
change:function(){
this.isactive=!this.isactive
this.color='green'
},
change11(){
this.isUser=!this.isUser
}
},
computed: {
funllName: {
set:function(){
},get:function(){
}
},
totole: function () {
for (let i of this.list) {
this.res += i.id
}
console.log(111)
return this.res
},
}
})
</script>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
