目录
Vue是一种渐进式JS框架，对于熟悉HTML，CSS，JS知识的学生很容易上手，并且它可以在一个库和一个完整框架之间自如伸缩。
Vue的使用步骤：
1）提供标签用于填充数据
2）引入vue.js库文件
3）使用Vue语法做功能
4）将Vue提供的数据填充到标签里面
<body>
<div id="app" v-cloak>
<!-- {{}}插值表达式，作用就是将数据填充到标签中。 -->
<div>{{msg}}</div>
<div v-text="msg"></div>
<div v-html="msg1"></div>
<div>
<div v-text="num">num</div>
<button @click="num++">点击1</button>
<button @click="handle">点击2</button>
<button @click="handle($event)">点击3</button>
</div>
</div>
<!-- //引入VUE文件 -->
<script type="text/javascript" src="./JS/vue.js"></script>
<script text="text/javascript">
var vm = new Vue({
el: "#app", //数据要填冲的位置（此处用ID进行标记）
//data用于提供数据
data: {
msg: "Hello Vue",
msg1: "<h1>Hello</h1>",
num: 0,
},
methods: {
handle: function (event) {
//此处的this代表的是vm;
console.log(event.target.innerHTML);
this.num++;
},
},
});
</script>
</body>
Vue.js的模本语法
1.插值表达式
1）最常见最基本的形式是使用{{……}}的文本插值
<div id="app">
<div>{{ message }}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>Hello vue</h1>'
}
})
</script>
2)、v-text
v-text指令填充纯文本，他会替代显示对应的数据对象上的值，当绑定的数据对象的值发生变化的时候，插值处的内容也会随之更新。
注：此处为单向绑定，数据对象的值改变，插值会发生变化，但是当差值发生变化不会影响数据对象的值。其中：v-text可以简写为{{}},并且支持逻辑运算。
<div id="app">
{{ message }}
</div>
var app = new Vue({
el : '#app',
data : {
message : 'hello world'
}
})
注：vue中有个指令叫做 v-once 可以通过v-once与v-text结合，实现仅执行一次性的插值
<span v-once>这个将不会随msg属性的改变而改变: {{ msg }}</span>
3)、v-html
v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
<div id="app">
<p v-html="html"></p>
</div>
var app = new Vue({
el : '#app',
data : {
html: "<b style='color:red'>v-html</b>"
}
})
4)、v-model
v-model通常用于表单组件的绑定，例如input，select等。它与v-text的区别在于它实现的表单组件的双向绑定，如果用于表单控件以外标签是没有用的。
<div id="app">
<input v-model="message " />
</div>
var app = new Vue({
el : '#app',
data : {
message : 'hello world'
}
})
2.事件绑定
1、监听事件
可以使用v-on来进行DOM事件的监听，并在触发时运行一些JS代码。
2、事件处理方法
对于逻辑比较复杂的事件，直接在JS代码中邪v-on不太可行，因此v-on还可接收一个需要调用的方法名称。
<div id="app">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
<script type='text/javascript'>
var vm= new Vue({
el: '#app',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
<script>
注：v-on:click的另一种写法就是@click
1）如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
2）如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是“$event”
<body>
<div id="app" v-cloak>
<div>
<button @click="handle('123',$event)">点击3</button>
</div>
</div>
<!-- //引入VUE文件 -->
<script type="text/javascript" src="./JS/vue.js"></script>
<script text="text/javascript">
var vm = new Vue({
el: "#app", //数据要填冲的位置（此处用ID进行标记）
//data用于提供数据
data: {
},
methods: {
handle: function (message, event) {
//此处的this代表的是vm;
console.log(event.target.innerHTML);
alert(message);
},
},
});
</script>
</body>
3、事件修饰符
1）.stop:阻止单击事件继续传播（阻止冒泡，）
语法：
//阻止链接的跳转
<a v-on:click.stop="doThis"></a>
2）.prevent:阻止默认事件发生
语法：
<!-- 提交事件不再重载页面，submit提交控件-->
<form v-on:submit.prevent="onSubmit"></form>
3).capture:捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自 然顺序执行触发的事件。
语法：
//如果没有使用.capture, 点击按钮的时候, 就会先触发函数2, 然后触发函数1,
//添加了.capture, 点击按钮的时候, 就只会先触发函数1, 然后触发函数2
<div @click.capture='函数1' style='width:200px;height:200px;background:#000'>
<input type='button' value='按钮' @click='函数2'>
</div>
4).self:只有点击自身时才会触发事件
语法：
//如果没有使用.self, 点击按钮的时候, 就会先触发函数2, 然后触发函数1,
// 添加了.self, 点击按钮的时候, 就只会先触发函数2,只有点击div盒子本身,才会触发函数1
<div @click.self='函数1' style='width:200px;height:200px;background:#000'>
<input type='button' value='按钮' @click='函数2'>
</div>
注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
5).once:事件触发一次
语法：
<a href='https://www.baidu.com' @click.prevent.once='函数'></a>
4.按键修饰符
1). .enter：enter键
2).tab：tab键
3).delete：删除（退格）键
4).esc:ESC键
5).space:空格键
6).up:上键
7).down:下
8).left:左
9).right:右
如下：enter和delete的实例，当按下delete键是，会清空用户名，当按下enter键是会进行提交操作。当然了，如果想执行其他的操作，只需要将enter和delete后面的方法名换掉，方法内容更换即可。
<body>
<div id="app">
<form action="">
用户名：<input
type="text"
v-on:keyup.delete="handle"
v-model="uname"
/><br />
密码：<input
type="text"
v-on:keyup.enter="handleSubmit"
v-model="pwd"
/><br />
<input type="button" v-on:click="handleSubmit" value="提交" />
</form>
</div>
<script type="text/javascript" src="./JS/vue.js"></script>
<script type="text/javascript">
/*
事件绑定：按键修饰符
*/
var vm = new Vue({
el: "#app",
data: {
uname: "",
pwd: "",
},
methods: {
handleSubmit: function () {
console.log(this.uname, this.pwd);
},
handle: function () {
this.uname = "";
},
},
});
</script>
</body>
3.属性绑定
属性绑定样式的语法：
//v-bind指令用法
<a v-bind:href='url'>跳转</a>
//缩写语法
<a :href='url'>跳转</a>
4、分支循环结构
1)分支结构：
v-if
v-else
v-else-if
v-show
根据学生的程序判断学生登记的判断实例：
<body>
<form action="">
<input type="text" v-model="score" />
<button @click="show">显示</button>
</form>
<div id="app">
<div v-if="score>=90">优秀</div>
<div v-else-if="score<90&&score>=80">良好</div>
<div v-else-if="score<80&&score>60">一般</div>
<div v-else>比较差</div>
</div>
<script type="text/javascript" src="./JS/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
score: 80,
},
methods: {
show: function () {
this.score = score;
},
},
});
</script>
</body>
2)循环结构
v-for遍历数组
<body>
<div id="app">
<div>水果列表</div>
<ul>
<li v-for="item in list">{{item}}</li>
<li v-for="fruit in fruits">
{{fruit.id+'-----'+fruit.cname+'------'+fruit.ename}}
</li>
<li v-if="id==1" v-for="{id,cname,ename} in fruits">
{{id+'-----'+cname+'------'+ename}}
</li>
</ul>
</div>
<script type="text/javascript" src="./JS/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
list: ["apple", "banana", "orange"],
fruits: [
{ id: 1, cname: "苹果", ename: "apple" },
{ id: 2, cname: "苹果", ename: "apple" },
{ id: 3, cname: "苹果", ename: "apple" },
],
},
});
</script>
</body>
显示结果：