Vue的基础语法
一、插值操作
1.使用Mustache语法获取data中的数据
示例：
<div id="app">
<h2>{{firstName +" "+ lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
firstName:"Lebron",
lastName:"James"
}
});
</script>
使用Mustache语法显示在浏览器中的数据是响应式的，若是data中的数据改变了，浏览器中显示的数据也会动态的改变，这很好用，若是从服务器中动态的获取到数据，就不需要先获得元素，再进行追加了。
2.有时候某些东西，我们不想要它响应式的改变，这个时候可以使用v-once指令
<div id="app" v-once>{{message}}</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello world!'
}
});
</script>
可以打开控制台，输入app.message = "hello vue!",可以看见，虽然message的值修改了，但是页面显示的数据并没有动态的改变。
3.有时可能我们想要显示的数据是一个html类型的数据，就像是含有html标签这样子的数据，这个时候若是直接使用Mustache语法肯定解析不了html标签。这个时候就可以使用一个v-html指令，这就像是给这个元素添加了innerHTML值一样。
<div id="app" v-html="baidu"></div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
baidu:"<a href='http://www.baidu.com'>百度一下</a>"
}
});
</script>
4.v-text指令和Mustache语法差不多，都是取出数据插入元素中，应该就和innerText差不多吧。
<div id="app">
<h2 v-text="message"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
});
</script>
5.v-pre指令应该和pre标签差不多，使用了这个标签之后就不会对其中的文本进行语法的解析。
<div id="app" v-pre>{{message}}</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀'
}
});
</script>
像是这串代码在页面中显示的就是{{message}}而不是你好呀，因为没有进行Mustache语法的解析。
6.有时候，若是我们在准备数据的时候需要花一定的时间，而这个时候Mustache语法显示的直接是语法格式的文本，然后会有个闪动后出现我们想要显示的数据。这种情况对用户来说体验是非常不好的，所以还不如在加载完成之前先不要显示呢。这个时候就可以使用到v-cloak指令，cloak是斗篷的意思，寓意在没加载完成之前先使用斗篷把数据盖起来，别让用户看到先。
<div id="app">{{message}}</div>
<script src="../js/vue.js"></script>
<script>
setTimeout("const app = new Vue({\n" +
" el: '#app',\n" +
" data: {\n" +
" message: 'hello vue!'\n" +
" }\n" +
" });",1000);
</script>
这串代码就可以演示闪动的场景，你可以感受到，的确不是很友好。
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>{{message}}</div>
<script src="../js/vue.js"></script>
<script>
setTimeout("const app = new Vue({\n" +
" el: '#app',\n" +
" data: {\n" +
" message: 'hello vue!'\n" +
" }\n" +
" });",1000);
</script>
结合style属性选择器，当app加载完成之后它会把v-cloak给去掉，就是拿走斗篷，底下的数据就显示出来了。
通过上面的指令和Mustache语法，我们能够动态的更新元素中的文本内容，但是有的时候像是a标签中的href，img标签中的src，我们也想要动态的进行更新，这就需要进行动态绑定属性操作。
二、动态绑定属性操作
1.v-bind用于绑定一个或者多个属性值
示例：动态绑定a标签的href和img标签的src
<div id="app">
<a v-bind:href="linkVue">vue官网</a>
<img v-bind:src="vueLogo" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
linkVue:"https://cn.vuejs.org/",
vueLogo:"https://cn.vuejs.org/images/logo.png"
}
});
</script>
v-bind有个语法糖写法，就是为了简化它的书写，给各位程序员一点甜头的意思。语法糖写法就是直接一个":"
<div id="app">
<a :href="linkVue">vue官网</a>
<img :src="vueLogo" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
linkVue:"https://cn.vuejs.org/",
vueLogo:"https://cn.vuejs.org/images/logo.png"
}
});
</script>
这就是语法糖写法，结果没有变化。
2. v-bind绑定class，很多时候我们会希望动态的切换class，比如说音乐的点击和关闭等等。v-bind绑定class有两种方式，分别是对象语法和数组语法
2.1 v-bind绑定class，对象语法
对象语法简述：
<div id="app">
<h2 v-bind:class="{active:true,line:false}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '为了部落！！！'
}
});
</script>
v-bind绑定class的对象语法就是像这样以键值对的方式，不过value是一个布尔值，表示这个class是否添加上去。
<div id="app">
<h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '为了部落！！！',
isActive:true,
isLine:false
}
});
</script>
这样就能动态的添加或者删除该类了
下面例子演示，点击文字切换红色。
<div id="app">
<h2 v-bind:class="{active:isActive,line:isLine}" v-on:click="textClick">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '为了部落！！！',
isActive:true,
isLine:false
},
methods:{
textClick:function () {
this.isActive = !this.isActive;
}
}
});
</script>
vue这个响应式的设计真的很方便，很好玩。
2.2v-bind绑定class,数组语法
<h2 v-bind:class="[active,line]">{{message}}</h2>
<h2 v-bind:class="getClass()">{{message}}</h2>
<h2 v-bind:class="classes">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊，李银河!',
active:"sdfdsfsdf",
line:"sdfsdf"
},
methods:{
getClass:function () {
return [this.active,this.line];
}
},
computed:{
classes:function () {
return [this.active,this.line];
}
}
});
</script>
这就是数组语法绑定class，注意数组中的元素不能加单引号，不然就当作字符串而不是变量解析了。可能你会觉得直接写在class中有点长了，那么可以用一个函数或者计算属性来获取。
-
v-bind绑定style，同样也有对象语法和数组语法，这里就一起展示了
<div id="app"> <h2 v-bind:style="{fontSize:font + 'px',color:color}">{{message}}</h2> <h2 v-bind:style="[myFontSize,myColor]">{{message}}</h2> <h2 v-bind:style="[finalFontSize,finalColor]">{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊，李银河!', font:50, color:'red', myFontSize:{fontSize:50+'px'}, myColor:{color:'red'} }, computed:{ finalFontSize:function () { return {fontSize:this.font+"px"}; }, finalColor:function () { return {color:this.color}; } } }); </script>
三、计算属性
有些时候我们想展示的数据不只是一个，而是多个数据进行一定的处理之后再展示的，这时候直接使用Mustache语法的话可能无法满足需求，所以vue中有个叫做计算属性的东西，就是上面例子中我在computed中定义的函数，这些虽然是函数，但是它起到的效果是和属性差不多的，调用的时候不需要加小括号。
下面就以一个计算书本总价格的例子来使用一下吧。
<div id="app">
<h2>总价格：{{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: [
{id: 110, name: 'Unix编程艺术', price: 119},
{id: 111, name: '代码大全', price: 105},
{id: 112, name: '深入理解计算机原理', price: 98},
{id: 113, name: '现代操作系统', price: 87},
]
},
computed: {
totalPrice:function () {
let total = 0;
for(let i = 0;i < this.books.length;i++){
total += this.books[i].price;
}
//这种for循环取出来的i是books中的指定下标的元素，就和forEach差不多
// for(let i of this.books){
// total += i.price;
// }
//这种for循环取出来的i是下标，就和for(let i = 0;i < this.books.length;i++)差不多
// for(let i in this.books){
// total += this.books[i].price;
// }
return total;
}
}
})
</script>
计算属性的setter和getter
其实上面的例子是一个简化的写法，按照javabean的思想，一个属性是要有set和get方法的，这里其实也是这样，不过一般只是作为数据展示，不希望进行改变数据的值，所以就省略的set方法。
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName:"Lebron",
lastName:"James"
},
computed:{
fullName:{
set(fullName){
let names = fullName.split(" ");
this.firstName = names[0];
this.lastName = names[1];
},
get(){
return this.firstName + " " + this.lastName;
}
}
}
});
</script>
为什么在数据展示的时候推荐使用计算属性而不是方法呢？
这涉及到计算属性的设计，因为计算属性是具有缓存的，多次调用其实只是执行了一次，而方法没有缓存，调用了多少次就执行了多少次，这就产生了性能和效率上的浪费。
<div id="app">
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName : "Lebron",
lastName : "James"
},
computed:{
fullName(){
console.log("the computed is running...");
return this.firstName + " " + this.lastName;
}
},
methods:{
getFullName(){
console.log("the method is running...");
return this.firstName + " " + this.lastName;
}
}
});
</script>
打开控制台，可以看见每调用一次方法，方法就会执行一次。而计算属性只会执行一次，两个效率高下立分
