Vue(视图信息与脚本数据双向绑定）
Vue的基础入门
Vue的实现流程：
1、在HTML的body标签中引入需要通过Vue进行数据绑定的标签
2、在HTML中的相关的视图标签中设置标签元素的id（<div id="app"></div>）
3、通过外链的形式将Vue的核心库进行导入：
<script src="js/vue.js"></sciript>
4、在另外一个script中书写对应的Vue–JS脚本
--（1：创建对应的Vue对象，并且进行实例化）
--（2：指定Vue对象绑定的标签元素–》el："#app"
--（3：设置Vue对象所存储的数据–》data：{message：“Vue基础入门”,name:“JavaScript”
}）
5、在HTML中引入的视图标签中通过插值表达式的形式将Vue对象的数据和插值表达式进行绑定
<!-- 相应的插值表达式必须放在Vue对象对应的视图中才能生效 -->
<body><!-- TODO:vue的第一部分：视图 --><div id="app"><!-- 插值表达式（双大括号）：把vue对象中的数据绑定到视图中 --><!-- 语法：{{数据名称}} -->{{message}}<!-- 相应的插值表达式必须放在Vue对象对应的视图中才能生效 --></div>
</body>
<!-- 导入vue的核心库 -->
<script src="js/vue.js"></script>
<script>//TODO:vue的第二部分：实例化vue对象-->用脚本JS代码进行数据存储new Vue({// 1、vue作用的视图//TODO:el属性：指定vue对象作用的视图-->指定视图的id属性值和css中的id选择器类似// el是Element元素的缩写，与HTML中的元素id属性值相同，进行数据绑定el:"#app",//2、vue存放的数据//TODO:data属性：指定vue对象存储的数据-->指定数据的名称和值/*语法：data:{数据名称:数据值，数据名称：数据值}*/data:{message:"vue基础入门"}})
</script>
</html>
对Vue对象赋予其方法：（
1、在创建Vue对象的时候，通过let ve=new Vue({})为Vue对象去一个变量名，方便JS中的其他函数调用Vue对象的函数以及变量
2、可以定义多个函数放在Vue对象中methods中–》调用的时候需要通过这种形式（Vue对象名.methods.methods中的方法）去调用
3、数据模型的另外一种创建方式：
data(){return{name:"",age:"",methods:{hi:function(){}}}}
）
<body><!-- 视图 --><div id="div"><div>姓名：{{name}}</div><div>班级：{{classRoom}}</div><!-- 通过标签中的普通函数去调用Vue对象中的方法 --><button onclick="hi()">打招呼</button><button onclick="update()">修改班级</button></div>
</body>
<script src="js/vue.js"></script>
<script>// 将Vue对象定义一个变量名--》ve方便其他的JS普通函数去调用Vue对象中的方法let ve=new Vue({el:"#div",// Vue对象中存放的数据的写法：// data:{// name:"张三",// classRoom:"1班"// },// 另外一种写法：data(){return{name:"张三",classRoom:"1班",// 可以定义多个函数放在Vue对象中methods中--》调用的时候需要通过这种形式（Vue对象名.methods.methods中的方法）去调用// 语法：methods: {updateClassRoom:function(){ve.classRoom="2班"},hi:function(){alert("hello world")}}}}})// 定义一个普通函数，在函数中调用Vue对象中的方法function hi(){ve.methods.hi()}function update(){ve.methods.updateClassRoom()// ve.updateClassRoom()-->报错调用失败}</script>
Vue常用指令
Vue指令的使用注意：
1）Vue的指令必须写在HTML中的标签的属性中，不能在属性值中写JS代码
2）Vue的指令只能用在Vue对象绑定的视图中，不能写在JS脚本中
1、文本插值指令v-html(可以解析data中的HTML标签)
通过<标签名 v-html=“vue中的data的key”></标签名>
<body><div id="div"><!-- 插值表达式不能解析HTML标签的内容 --><div>{{msg}}</div> <!-- TODO：使用文本插值命令v-html="" 通过Vue对象的data的属性名进行调用 --><div v-html="msg"></div><!-- 相当于是 --><!-- <div><h1>Hello Vue</h1></div> --></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{msg:"<h1>Hello Vue</h1>"}});
</script>
2、绑定任意HTML标签属性指令v-bind（可以为HTML中的标签的任意属性进行绑定data值，包括css选择器的值）
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绑定任意标签属性</title><style>.my{border: 1px solid red;}</style>
</head>
<body><div id="div"><!--插件表达式不能写在属性中--><a href={{url}}>百度一下</a><br><!--v-bind：为 HTML 标签绑定属性值--><!-- <a href="https://www.baidu.com">百度一下</a> --><a v-bind:href="url">百度一下</a><br><!--v-bind 可以省略不写--><a :href="url">百度一下</a><br><!--也可以绑定其他属性--><div :class="cls">我是div</div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{url:"https://www.baidu.com",cls:"my"}});
</script>
3、v-if（v-else-if，v-else）和v-show条件渲染指令
v-if v-show 他们俩虽然都是控制元素是否显示，但是底层的原理不一样
1、v-if 如果条件为false，页面中根本没有这个元素
2、v-show如果条件为false，页面中有这个元素只不过它的display属性值为none
<body><div id="div"><!-- 判断num的值，对3取余余数为0显示div1余数为1显示div2余数为2显示div3 --><div v-if="num%3 == 0">div1</div><div v-else-if="num%3 == 1">div2</div><div v-else>div3</div><!-- v-show 控制元素是否显示 --><div v-show="flag">div4</div><!--v-if v-show 他们俩虽然都是控制元素是否显示，但是底层的原理不一样v-if 如果条件为false，页面中根本没有这个元素v-show如果条件为false，页面中有这个元素只不过它的display属性值为none--></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{num:1,flag:true}});
</script>
4、v-for列表渲染指令（分为增强for，和普通for）
4.1增强for：
语法：<li v-for=“element in names”></li>
4.2普通for：
语法：<li v-for=“(stu,index) in student”></li>
<body><div id="div"><ul><!--类似于增强for循环1. element是遍历得到的每一个元素(变量名可以自定义)--必须通过插值表达式的形式才可以取到对应的值有一个作用域,它的作用于在当前的这个循环中2. names 是被遍历的数组或对象--><!-- 1.1增强for遍历数组 --><li v-for="element in names">{{element}}</li><br><!-- 1.2增强for遍历对象 --><li v-for="stu in student"><!-- 姓名：{{stu.name}}<br>年龄：{{stu.age}} -->{{stu}}</li><!--类似于普通for循环---》1. x 是遍历得到的每一个元素--每一个索引对应的值2. names 是被遍历的数组或对象3. index 是索引--默认从0开始--><!-- 2.1普通for遍历数组 --><li v-for="(x,index) in names">索引：{{index}}-值：{{x}}</li><br><!-- 2.2普通for遍历对象 --><!--遍历对象的时候，索引值为所遍历对象的属性名从上之下依次遍历--><li v-for="(x,index) in student">索引：{{index}}-值：{{x}}</li></ul></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{names:["张三","李四","王五"],student:{name:"张三",age:23}}});
</script>
5、v-on或者@进行事件绑定事件（相较于原有的JS事件绑定把原有的on去掉）
语法：<button v-on:click=“change”></button>
(推荐简写方法)<button @click=“change”></button>
<body><div id="div"><div>{{name}}</div><!--v-on：为 HTML 标签绑定事件--><!-- 原有的JS函数进行事件绑定 --><button onclick="change()">单击_改变div的内容</button><!-- Vue对象中的方法进行事件绑定 --><!-- 相较于原生的JS函数可以不用谢小括号，JS必须写 --><button v-on:click="change">单击_改变div的内容</button><button v-on:dblclick="change">双击_改变div的内容</button><button @click="change">简写_改变div的内容</button></div>
</body>
<script src="js/vue.js"></script>
<script>let ve=new Vue({el:"#div",data:{name:"齐天大圣"},methods:{change(){this.name = "美猴王"}}});change = function(){ve.methods.change()}
</script>
6、表单绑定（*重要*）v-model
单向绑定：Vue的数据模型改变，HTML的标签视图改变
HTML的标签视图改变，Vue的是数据模型不变
双向绑定：Vue的数据模型改变，HTML的标签视图改变
HTML的标签视图改变，Vue的是数据模型跟着改变
<body><div id="div"><form autocomplete="off"><!--单向绑定-->姓名_单向绑定：<input type="text" name="username" :value="username"><br><!--双向绑定-->姓名_双向绑定：<input type="text" name="username" v-model:value="username"><br>年龄：<input type="number" name="age" v-model:value="age">性别:<input type="text" name="gender" v-model:value="gender"></form><hr></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{username:"张三",age:23,gender:"男"}});
</script>
