1、v-model
------普通标签绑定v-model
<p>
<input type="text" v-model="mod">
</p>
<p>
<!-- 后面只能输入数字，输入其他失去焦点的时候就清空后面不是数字的内容 -->
number:<input type="text" name="" v-model.number="mod">
</p>
<p>
<!-- 懒加载：失去焦点的时候执行 -->
lazy:<input type="text" v-model.lazy="mod">
</p>
<p>
<!-- 去掉输入框内收尾空格 -->
trim:<input type="text" v-model.trim="mod">
</p>------checkbox类型input绑定v-model
<label>
<!-- 多选框默认是不选中的状态，也就是false.
我给isTrue定义了true并且双向绑定给这个多选框，
就改变了原来的默认值，变成了选中的状态 -->
<input type="checkbox" v-model="isTrue">{{isTrue}}
</label>上述运行结果:
------多选框绑定多个值
<h3>多选框绑定多个值</h3>
<!--这三个input绑定了一个空数组,arr没有东西,默认就是false,都是不选中状态 -->
<!-- 当checkbox为选中的时候就是true -->
<!-- 为true的时候默认会把value的值放到数组中去 -->
<label>
<input type="checkbox" v-model="arr" value="张三">张三
</label>
<label>
<input type="checkbox" v-model="arr" value="李四">李四
</label>
<label>
<!--
会隐性的将arr这个变量里面的值与value进行对比，
如果有李老师那么就删除，false就不选中
-->
<input type="checkbox" v-model="arr" value="李老师">李老师
</label>
<p>
{{arr}}
</p>上述运行结果：
------单选框绑定值
<label>
<!--
vue实现单选，v-model="sex" sex：男
会隐性的将sex这个变量里面的值与value进行对比，如果一致那么就选中
-->
<input type="radio" name="s" value="男" v-model="sex">男
</label>
<label>
<input type="radio" name="s" value="女" v-model="sex">女
</label>
<label>
<input type="radio" name="s" value="其他" v-model="sex">其他
</label>
<p>
长江7号：{{sex}}
</p>上述运行结果：
2、Object.defineProperty（）方法
/*
Object.defineProperty(参数1，参数2，参数3):
这个方法会直接在一个对象上定义一个新属性，
或者修改一个对象的现有属性，并返回此对象。
参数1：要添加的或者要修改的对象
参数2：要添加的对象的属性
参数3：是个对象，针对数据的属性进行设置
*/
let obj = {}
// 给obj这个空对象添加一个name属性，并且对这个属性进行设置
Object.defineProperty(obj, "name", {
// delete(删除对象的属性)，默认是true,false不可以使用删除属性
configurable: false,//此时无法使用delete进行属性删除
// 能否对这个对象for-in/for-of等方法进行必须遍历。
默认是true,false不可以对对象进行遍历
enumerable: false,
// 对象的属性值是否可以进行修改，默认值是true,false不可以修改对象的属性值
writable: false,
// 对象的属性值，默认如果没有value属性那么就是undefined
value: "小明"
})
// value属性
console.log('obj.name的value值',obj.name)
// writable属性
obj.name = "小亮"
console.log(obj.name, "writable属性")
// enumerable属性
for (var i in obj) {
console.log(i, "enumerable属性")
}
// configurable属性
delete obj.name
console.log(obj.name, "configurable属性")上述运行结果：
注解：
1.由于writable属性是false，所以obj.name='小亮'未生效。
2.由于enumerable属性是false,所以并没有循环打印。
3.由于configurable属性是false,所以'小明'也没有被删除，依然可以打印。
3、双向绑定的原理
<script type="text/javascript">
let oInput=document.querySelector("#inp")
let oP=document.querySelector(".sp")
let obj={}
// 给obj这个空对象添加一个name属性，并且对这个属性进行设置
Object.defineProperty(obj,"name",{
// 对定义的属性读取的时候会触发get对应的函数，并返回结果
get:function () {
},
// set:对定义的属性写入的时候会触发set对应的函数，
会接受一个参数，并且实时监听这个参数的变化，
这个参数是动态绑定的值，会变化
set:function(newVal){
// 会变化的
console.log(newVal)
// input框里面的内容等于实时变化的内容
oInput.value=newVal
// p里面的内容等于实时变化的内容
oP.innerText=newVal
}
})
// change主要用于select选中输出
// change多选框内容发生改变的时候
oInput.addEventListener("input",function(){
console.log(oInput.value,"oInput.value")
// 对象里面的属性等于input里面的属性
obj.name=oInput.value
})
// 默认给对象设置一个值
obj.name="张三"
/*
给input绑定事件，将input里面的值给了对象中的name属性，
只有input值发生了变化就把值给对象中的name
然后利用Object.defineProperty方法里面的
set方法对name这个数据进行监听，
然后将发生改变的数据给p标签
*/
</script>4、表单小例子
<body>
<h1>表单小例子</h1>
<hr>
<div id="app">
<p>
<label>
姓名：<input type="text" name=""
v-model="form.name" placeholder="请输入姓名">
</label>
</p>
<p>
<label>
年龄：<input type="text" v-model="form.age"
placeholder="请输入年龄">
</label>
</p>
<p>
性别：
<label>
<input type="radio" name="s" v-model="form.sex" value="男">男
</label>
<label>
<input type="radio" name="s" v-model="form.sex" value="女">女
</label>
</p>
<!-- @click绑定点击事件，触发btnClick函数-->
<input type="submit" value="提交" @click="btnClick">
<p>
{{obj.name}}--
{{obj.age}}--
{{obj.sex}}--
</p>
</div>
</body>
</html>
<script type="text/javascript">
// 构建出一个vue实例
var app = new Vue({
el: "#app",
// 存储数据变量
data: {
form: {
name: "",
age: "",
sex: ""
},
obj: {
name: "",
age: "",
sex: ""
}
},
// 存放函数的地方
methods: {
// fn:function () {
// },
// fn2:function(){
// }
// 简写
// fn(){}
btnClick() {
// this.obj.name=this.form.name
// this.obj.age=this.form.age
// this.obj.sex=this.form.sex
// 简写
this.obj=this.form
// 模拟ajax请求数据，请求成功之后
//setTimeout(() => {
// let objList = {
// name: "王付玉",
// age: 52,
// sex: "女"
// }
// 把后端请求的数据给data中定义的obj变量
// this.obj = objList
}, 3000)
/*
在函数中请求后端数据，
将请求成功的数据赋值给data中定义的变量，
然后将变量用插值的方法渲染到页面
*/
},
}
})
/*
在普通函数中的this属于直接调用者：
比如btn.onclick=function(){}，这个函数中的this属于btn。
如果默认情况下没有找到调用者，则this属于window
在严格情况下没有直接调用者this是undefined
箭头函数中this属于所处的对象。
构造函数中的this是new出来的那个对象
*/
</script>上述运行结果：
5、v-text与v-html
<div id="app">
<!--
v-html：以代码的形式输出 相当于js中的innerHTML
v-text：以文本的形式输出 相当于js中的innerText
-->
<input type="text" name="" v-model="msg">
<!-- v-once：给谁绑定这个指令，
那么这个指令就只【渲染一次】，
包括元素或者组件所有的子节点。
首次渲染后，不会随着数据的变化而重新渲染。视为静态内容 -->
<div v-html="msg"></div>
<div v-text="msg" v-once></div>
{{msg}}
<!-- 区别：插值渲染与v-text渲染数据虽然相同,
但是当js报错的时候,v-text不会暴露代码 -->
</div>6、v-if与v-show
<div id="app">
<!-- v-if判断是否加载这个p标签 -->
<p v-if="true">
我是v-if
</p>
<p v-if="false">
我是dog
</p>
//如果v-if=""，相当于没有v-if，只有p标签
<p v-if="">
我是小亮
</p>
//v-else 元素必须紧跟在带 v-if 或者
v-else-if 的元素的后面，否则它将不会被识别。
<p v-else>
我是v-else
</p>
<!-- 根据多个条件进行加载 假定msg='E'-->
<h3 v-if="msg=='A'">我是A</h3>
<h3 v-else-if="msg=='B'">我是B</h3>
<h3 v-else-if="msg=='C'">我是C</h3>
<h3 v-else-if="msg=='D'">我是D</h3>
<h3 v-else>啥也不是</h3>
<!-- v-show加载完成，只是改变了display的显示隐藏 -->
<p v-show="true">
我是小明
</p>
</div>
<!--
v-if与v-show的区别？
v-if判断的是元素是否加载渲染到页面上
v-show是加载完成之后，判断元素是否显示与隐藏，实际改变的是
display的显示隐藏样式
-->上述运行结果：
7、v-for
v-for 具体想要生成谁，就把v-for写在谁身上
<div id="app">
<!-- v-for 具体想要生成谁，就把v-for写在谁身上 -->
<!--
语法：v-for="item in arr"
v-for="数组循环后每条数据的别名(随便起的) in data中定义的变量名称也就是数组"
-->
<ul>
//arr: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
<li v-for="item in arr">
{{item}}
</li>
</ul>
</div>上述运行结果：
<!--
语法：v-for="(item,index) in arr"
v-for="(数组循环后每条数据的别名,每条数据的索引下标--从0开始)
in data中定义的变量名称也就是数组"
-->
<ul>
<li v-for="(ccc,i) in arr">
{{i}}---{{ccc}}
</li>
</ul> 上述运行结果：
<!-- 只要遇到v-for就给他加上:key="index"
使用key属性可以让diff算法更高效，提高渲染效率。-->
<ul>
<li v-for="(item,index) in stu" :key="index">
<span>{{index+1}}---姓名：{{item.name}}</span>
<span>{{index+1}}---性别：{{item["sex"]}}</span>
<span>{{index+1}}---年龄：{{item["age"]}}</span>
<span>{{index+1}}---学校：{{item.sch}}</span>
</li>
</ul>var app = new Vue({
el: "#app",
data: {
stu: [{
name: "小红",
age: 18,
sex: "女",
sch: "北京大学"
},
{
name: "小亮",
age: 19,
sex: "男",
sch: "南京大学"
},
{
name: "小明",
age: 20,
sex: "男",
sch: "东京大学"
},
],
arr: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
}
})
/*
js的写法：
for(var i=0;i<arr.length;i++){
// 第一种方法
// ul.innerHTML+=`<li>${arr[i]}</li>`
// 第二种方法
var oli = document.createElement('li');
oli.innerText=arr[i]
ul.appendChild(oli)
}
*/上述运行结果：
<table width="500" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>学校</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in stu" :key="index">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.age}}</td>
<td>{{item.sch}}</td>
<td>
<a href="">删除</a>
</td>
</tr>
</table>
<!--
1 v-for里面的key的作用？
:key代表的是唯一，不加key会在项目中报警告,渲染的时候会出现渲染错位。
key的作用主要是为了高效更新虚拟dom，
其目的是为了让vue可以区分他们，加上key属性有利于代码优化，减少资源浪费
2 v-if与v-for能在一起使用吗？
能，但是不建议使用，因为v-for优先级比v-if高，
带来性能方面的浪费。（每次渲染都会先循环在进行条件判断）
循环了一万条数据，准备显示到页面上了
v-if判断是个false:不加载,不用渲染页面了
-->上述运行结果：
