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对象对应的视图中才能生效 -->
html
<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(){}}}}
）
html
<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"></标签名>
html
<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选择器的值）
html
<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
html
<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>
html
<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>
html
<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的是数据模型跟着改变
html
<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>