Vue学习笔记（篇二）——Vue基础语法
Vue 基础语法
1、Mustache语法
形如"< h2 >{{message}}< h2 >"的语法格式，称之为Mustache语法
注：mustache（胡子/胡须）
2、v-once
该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。
举例代码（练习）：
<div id="app">
<h2>{{message}}h2>
<h2 v-once>{{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '呵呵呵'
},
methods: {}
});
script>
3、v-html
如果我们直接通过{{}}来输出，会将HTML代码也一起输出。
但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。
如果我们希望解析出HTML展示
可以使用v-html指令
该指令后面往往会跟上一个string类型
会将string的html解析出来并且进行渲染
<div id="app">
<h2>{{url}}h2>
<h2 v-html="url">h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
url: '百度一下',
},
methods: {}
});
script>
4、v-text
v-text作用和Mustache比较相似：都是用于将数据显示在界面中
v-text通常情况下，接受一个string类型
<div id="app">
<h2>{{message}}h2>
<h2 v-text="message">,刘大山！h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello',
},
methods: {}
});
script>
5、v-pre
v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
比如下面的代码：
第一个h2元素中的内容会被编译解析出来对应的内容
第二个h2元素中会直接显示{{message}}
<div id="app">
<h1>{{message}}h1>
<h1 v-pre>{{message}}h1>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello'
},
methods: {}
});
script>
6、v-cloak
在某些情况下，我们浏览器可能会直接显示出未编译的Mustache标签。
为了让为编译的mustache显示出来，可使用v-cloak.
这个感念不太容易理解，具体通过代码体现：
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
[v-cloak]{
display: none;
}
style>
head>
<body>
<div id="app" v-cloak>
<h1>{{message}}h1>
div>
<script src="../js/vue.js">script>
<script>
//在vue解析之前，div中又一个属性 v-vloak
//在vue解析之后，div中没有一个属性 v-vloak
setTimeout(() => {
const app = new Vue({
el: '#app',
data: {
message: 'Hello',
},
methods: {}
});
}, 2000);
script>
body>
7、v-bind
v-bind 用于绑定一个或多个属性值，或者向另一个组件传递props值
在开发中，需要动态绑定的属性例如：图片的链接src、网站的链接href、动态绑定一些类、样式等
例，通过vue实例中的data绑定元素的src和href：
<div id="app">
<img v-bind:src="imgUrl" alt="">
<h1><a v-bind:href="baiduUrl">百度一下a>h1>
<img :src="imgUrl" alt="">
<h1><a :href="baiduUrl">百度一下a>h1>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
imgUrl: 'https://img14.360buyimg.com/seckillcms/s250x250_jfs/t1/184564/27/10546/72131/60d137c4Ecbe5e45f/30bcc8ad97d26ab4.jpg',
baiduUrl: 'https://www.baidu.com'
},
methods: {
}
});
script>
(1)v-bind绑定class
很多时候我们希望动态的来切换class，比如：
当数据为某个状态时，字体显示红色。
当数据另一个状态时，字体显示黑色。
绑定class有两种方式：
对象语法
数组语法
绑定方式：对象语法，对象向语法的含义是class后面跟的是一个对象
例：
用法一：直接通过{}绑定一个类
< h2 :class="{‘active’: isActive}">Hello World
用法二：也可以通过判断，传入多个值
< h2 :class="{‘active’: isActive, ‘line’: isLine}">Hello World
用法三：和普通的类同时存在，并不冲突注：如果isActive和isLine都为true，那么会有title/active/line三个类
< h2 class=“title” :class="{‘active’: isActive, ‘line’: isLine}">Hello World
用法四：如果过于复杂，可以放在一个methods或者computed中注：classes是一个计算属性
< h2 class=“title” :class=“classes”>Hello World< /h2>
绑定方式：数组语法，数组语法的含义是class后面跟的是一个数组
例：
用法一：直接通过{}绑定一个类
< h2 :class="[‘active’]">Hello World< /h2>
用法二：也可以传入多个值
Hello World 用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
< h2 class=“title” :class=“[‘active’, ‘line’]">Hello World
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
< h2 class=“title” :class=“classes”>Hello World
(2)v-bind绑定style
我们可以利用v-bind:style来绑定一些CSS内联样式。
在写CSS属性名的时候，比如font-size
我们可以使用驼峰式 (camelCase) fontSize
或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’
绑定stylle有两种方式：
对象语法
数组语法
绑定方式：数组语法
:style="{color: currentColor, fontSize: fontSize + ‘px’}"
style后面跟的是一个对象类型
对象的key是CSS属性名称
对象的value是具体赋的值，值可以来自于data中的属性
绑定方式二：数组语法
< div v-bind:style="[baseStyles, overridingStyles]">
style后面跟的是一个数组类型
多个值以，分割即可
8、计算属性
我们知道，在模板中可以直接通过插值语法显示一些data中的数据。
但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}
我们可以将上面的代码换成计算属性：
OK，我们发现计算属性是写在实例的computed选项中的。
例举：
<div id="app">
<h2 :style='{backgroundColor: "wheat"}'>{{firstName+' '+lastName}}h2>
<h2 :style='{backgroundColor: "pink"}'>{{getFullName()}}h2>
<h2 :style='{backgroundColor: "tomato"}'>{{fullName}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Jim',
lastName: 'Join',
},
//计算属性
computed:{
fullName: function(){
return this.firstName+" "+this.lastName;
}
},
methods: {
getFullName: function(){
return this.firstName+ " " +this.lastName;
}
}
});
script>
计算属性中也可以进行一些更加复杂的操作，比如：
- {{show(index)}}
总价为：{{totalPrice}}元
计算属性的setter和getter
每个计算属性都包含一个getter和一个setter
在上面的例子中，我们只是使用getter来读取。
在某些情况下，你也可以提供一个setter方法（不常用）。
在需要写setter的时候，代码如下：
<div id="app">
<h2>{{fullName}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Join',
lastName: 'Jim'
},
methods: {
},
computed: {
// 原来的形式
// fullName: function(){
// return this.firstName+' '+lastName;
// }
// 标准型形式
// 计算属性一般是没有set方法，只读属性
fullName: {
set: function(value){
console.log("我被重新赋值了！！！", value);
let names = value.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
},
get: function(){
return this.firstName+" "+this.lastName;
}
}
}
});
script>
计算属性的缓存
我们可能会考虑这样的一个问题：
methods和computed看起来都可以实现我们的功能，
那么为什么还要多一个计算属性这个东西呢？
原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。
我们来看下面的代码：
<div id="app">
{{firstName}} {{lastName}}h2>
{{getFullName()}}h2>
{{getFullName()}}h2>
{{getFullName()}}h2>
{{getFullName()}}h2>
{{fullName}}h2>
{{fullName}}h2>
{{fullName}}h2>
{{fullName}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Join',
lastName: 'Marry'
},
methods: {
getFullName: function(){
// 被调用四次
console.log("getFullName");
return this.firstName+ ' ' +this.lastName;
}
},
computed: {
fullName: {
get: function(){
// 被调用一次
console.log("fullName");
return this.firstName+ ' ' +this.lastName;
}
}
}
});
script>
9、事件监听
在前端开发中，我们需要经常和用于交互。
这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等
(1)v-on
这里，我们用一个监听按钮的点击事件，来简单看看v-on的使用
下面的代码中，我们使用了v-on:click="counter++”
另外，我们可以将事件指向一个在methods中定义的函数