### vue.js 优点
1.体积小
2.更高的而运行效率
3.双向数据绑定
4.生态丰富,学习成本低
1.创建第一个Vue程序
Code
<div id="hello">
{{ message }}
{{ dateils() }}
</div>
<script>
var vue = new Vue({
el: "#hello",
data: {
message: "the first vue program!",
},
methods: {
dateils: function () {
return "这是函数返回的结果";
}
}
});
</script>注意：
这就意味着我们接下来所有的改动都将在div内，div外部不受影响。
总结：
{{ }}：用于输出对象属性和函数返回值。
el：指定vue的作用范围,可以使用任何的css选择器，但是仅推荐id选择器,因为id选择器具有唯一性。
data：用于给Vue对象绑定一系列数据。
methods：用于定义函数，可用过return返回函数值。
在使用{{}}获取data中数据 时，可以在{{}}中书写表达式，运算符,放置函数,及进行一些逻辑运算。
Vue应用现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。当这些属性发生变化时,html试图也会产生相应的变化。我们可以在控制台修改vue.message的值，同时实例上也会跟着更新。
2.Vue文本渲染三种方法
Code
<div id="app">
<!-- {}}/v-text不能解析html元素，只会照样输出 -->
<p>{{hello}}</p>
<p v-text = 'hello'></p>
<p v-html = 'hello'></p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
hello:'<span>hello world</span>'
}
})
</script>{{}}：(插值表达式)
1.获取data中数据，将数据作为纯文本输出
2.不会覆盖标签中原有的内容
v-html 和 v-text：
共同点:会将原标签中的内容进行覆盖,对于插值表达式来说v-text及t-html在网络较差的环境下可以避免插值闪烁。。
1.v-html：获取data中数据，将元素当成HTML标签解析后输出
2.v-text:获取data中数据，将元素作为纯文本输出
3.V-on事件绑定
注:js事件三要素: 事件源,事件，监听器。
Code
<div id="hello">
<p>{{ handle }}</p>
<button v-on:click="handle_Message">处理信息</button>
</div>
<script>
var vue = new Vue({
el: "#hello",
data: {
handle: "12345(效果为倒序)" //p标签中的输出的handle属性。
},
methods: {
handle_Message: function () {
this.handle = this.handle.split('').reverse().join('');
//将p标签中的属性进行颠倒。
}
}
});
</script>总结：
1.通过对应的标签在数据源上进行事件的绑定.v-on:事件名
2.在Vue中事件处理函数都声名在实例中的mothods来进行定义。
3.v-on事件名赋值语句中是当前事件触发的函数名（v-on:click="handle_Message"）。
4.在Vue中this代表当前实例,可通过this对获取当前Vue实例中的一系列数据。
5.其次,我们并没有触碰到dom。所有的dom操作都由vue来进行了处理。
4.v-if、v-show及v-bind
v-if /v-show
Code
<div id="hello">
<p v-if="seen">显示则seen的值为true</p>
<p v-else>不显示则seen的值为false</p>
<p v-show="seen">显示则seen的值为true</p>
</div>
<script>
var vue = new Vue({
el: "#hello",
data: {
seen: true
},
});
</script>
注:如果seen为真那么则显示第一行。否则显示总结:
v-show：底层在控制页面标签是否展示时底层使用的时css 中 display属性控制标签展示和隐藏（数据量比较大,控制显示状态切换频繁,不会影响dom树结构,推荐使用）。
v-if：底层在控制页面标签是否展示时底层是直接操作dom元素,通过dom元素删除和增加来控制标签的展示和隐藏。
V-bind
Code
<sytle>
.red{
color:red;
}
</sytle>
<div id="app">
<span v-bind:title="message" :Class="isred?red:''">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var vue = new Vue({
el: '#app',
data: {
message: '页面加载于 ' + new Date().toLocaleString(),
isred:true
}
})总结
1.将页面标签中的属性绑定到Vue实例中,vue实例中数据的改变,将会影响到对应标签中的属性值变化。
2.用法v-bind:标签属性 ====> 简化写法 :属性名。
3.可用表达式控制标签中的样式显示效果。
5.V-for循环
循环输出属性值。v-for 指令可以绑定数组的数据来渲染一个项目.
Code
<div id="hello">
<ol>
<li v-for="num in nums">
{{ num.text }}
</li>
</ol>
</div>
<script>
var vue = new Vue({
el:"#hello",
data:{
nums: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
});
</script>总结
2.控制台中 实例化名.数组名.pusu( {text:"新列表信息"} )。 vue.nums.push({text:"这是新列表信息"})
1.在v-for要在对应的标签中加入:key,用于给vue实例内部提供重用和排序的唯一key
6.V-model
Code
<div id="hello">
<p>{{ model }}</p>
<input type="text" v-model="model">
</div>
<script>
var vue = new Vue({
el: "#hello",
data: {
model: "绑定成功"
}
</script>总结
1. dom结构数据与vue实例数据进行绑定 dom数据进行改变时实例数据会跟着改变
2. 实现表单输入和应用状态之间的双向绑定。 v-model。
案例实现
备忘录实例(v-model v-for 事件处理 数组处理)
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#app{
width: 400px;
position:absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
text-align: center;
}
#input{
height: 40px;
}
#input> input{
width: 100%;
height: 40px;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="app">
<h3>备忘录</h3>
<div id="input">
<input type="text" placeholder="请输入内容" v-model="msg" @keyup.enter="msg_add"/>
</div>
<div id="contant">
<ol v-show="msg_array.length > 0">
<li v-for="item,index in msg_array">{{item}} <a href="javascript:void(0);" @click="msg_delter(index)">删除</a></li>
</ol>
<h5 v-show="msg_array.length == 0 ">你展示没有添加备忘事件,请添加备忘事件~~~~</h5>
</div>
<div id="del">
<h5>当前备忘录中有 {{msg_array.length}}条事件。</h5>
<input type="button" @click="msg_del_all()" value="清空数组" />
</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:'#app', //代表vue实例范围。
data:{ //vue中定义一系列数据。
msg_array:["西瓜","番茄","土豆","橘子"],
msg:"",
},
methods:{ //在vue中定义相关函数。
//添加事件
msg_add:function(){
this.msg_array.push(this.msg); //将新增内容放入数组之中。
},
//删除事件
msg_delter:function(index){
console.log(index);
this.msg_array.splice(index); //splice(参数1,参数2) 参数1:删除元素起始下标 参数2:删除下表个数
},
//删除全部
msg_del_all:function(){
this.msg_array = []
}
}
})
</script>
总结
1. 数组添加数据,数组名.push(参数1) 参数1：数组元素;
2. 数组删除数据,数组名.splice(参数1,参数2) 参数1:删除元素起始下标 参数2:删除下表个数;
购物车实例(v-for 事件处理)
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" cellpadding="1">
<tr>
<th>编号</th>
<th>商品</th>
<th>数量</th>
<th>价格</th>
<th>总计</th>
</tr>
<tr v-for="item,index in items" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.count}}</td>
<td><input type="button" value="-" @click="sub_count(index)">{{item.price}}<input type="button" value="+" @click="add_count(index)"></td>
<td>{{item.price * item.count}}</td>
</tr>
</table>
<h2>总价格{{count_price()}}</h2>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
items:[
{id:1,name:"红米k30至尊纪念版",count:1,price:2499},
{id:2,name:"红米note4x",count:1,price:1399},
],
},
methods:{
//减去商品数量
sub_count:function(index){
if(this.items[index].count == 1){
alert('该商品购买数量不能小于1');
return false;
}
this.items[index].count--;
console.log(this.items[index].count)
// this.items[index].count <= 1 ? return:
},
//添加商品数量
add_count:function(index){
this.items[index].count++;
},
//计算总价
count_price:function(){
var TotalPrice = 0 ;
for(item in this.items){
TotalPrice += this.items[item].count * this.items[item].price;
}
return TotalPrice;
}
}
})
</script>总结
1.该实例所产生的数据主要通过控制数组对象内的数据进行实时数据变化,统计并计算得出结果。
methods/ computed
上面实例当中我们在购物车实例中,计算所有商品总价时,我们使用了methods中的count_price函数,在页面中我们需要调用多个count_price计算数据时就会进行多次计算时，极大影响了页面加载的效率。我们解决该问题方法时需要用到computed计算属性,该计算属性内的函数在调用时如果内部数据没有发生变化,将会将计算的值直接返回，数据发生变化时才会再次进行计算。
computed:{
//计算总价
count_price(){
var TotalPrice = 0 ;
for(item in this.items){
TotalPrice += this.items[item].count * this.items[item].price;
}
return TotalPrice;
},
}
插值表达式调用computed计算属性内的函数方式:{{ 函数名(count_price) }}事件修饰符
作用: 用来与事件进行连用，决定事件触发条件和事件触发机制。
常用修饰符
.top：用于阻止冒泡事件。
.once：只能执行一次事件。
.prevent：阻止默认行为。例如a标签阻止href进行跳转。
.self：只监听自身标签触发的对应事件(该修饰符放在父元素身上)。