2021-07-03_html双大括号语法

一、vue的安装和部署

二、创建第一个vue应用

创建vue对象，Vue()函数

三、 数据与方法

watch()方法，观察变量的变化，记录变量变化之前和变化之后的值。

四、生命周期

生命周期钩子函数不能使用箭头函数，因为要对this使用，而箭头函数是没有this的。
几种主要的钩子函数：

1. beforeCreate在实例初始化之后，在数据观测和watch/event事件配置之前被调用。
2. created在实例创建后立即被调用，此时实例已经完成数据观测（data observer），属性和方法的运算和watch/event事件回调，但此时挂载阶段还没开始，$el属性目前不可见。
3. beforeMount在挂载之前被调用：相关渲染函数被首次调用。
4. mounted，el被新创建的vm.$el替换，挂载成功。
5. beforeUpdate数据更新时调用。
6. updated组件dom已经更新，组件更新完毕。

五、模板语法

1.插值

插入变量的值。
形式：{{变量}}
使用v-once可以有一次性的插入，其后变量更新，插入后的值不改变。

2.原始HTML

双大括号{{变量}}只能将数据解释为普通文本，而非HTML代码。为输出真正的HTML，需要使用v-html指令。

rawHtml : '<span style="color:red">this is should be red</span>'

	//以双大括号形式1
	<p>Using mustaches: {{ rawHtml }}</p>
	//以v-html形式2
	<p v-html="rawHtml"></p>
1
2
3
4
5
6

结果：

3.特性

使用v-bind:属性=“data中表示样式的数据”（属性指标签的属性，例如src，class等等），缩写：class=" “或者：src=” "。

4.使用JavaScript表达式

可以在模板语法中使用复杂的函数运算。

六、指令

带有v-前缀的特殊特性，具有响应式。
v-if=“变量” ，变量为真时显示。

指令的修饰符

以‘.’指明的特殊后缀，指出一个指令应以特殊的方式绑定，例如：
@click.stop中.stop可以在当前点击事件执行完后停下来。（更多请看第十条）

七、class与style的绑定v-bind

可以动态的改变标签的样式。
语法：(v-bind):class="{active:isActive}"
含义：名称为.active样式是否绑定在标签上取决于isActive的值，为真就绑定，为假就不绑定。与普通class属性可以共存，还可以绑定多个class属性。
改变内联样式：
:style=“width:200px;height:200px;”

八、v-if 条件渲染

新增v-else-if

<div v-if="type === 'A'">
	  A
	</div>
	<div v-else-if="type === 'B'">
	  B
	</div>
	<div v-else-if="type === 'C'">
	  C
	</div>
	<div v-else>
	  Not A/B/C
	</div>
1
2
3
4
5
6
7
8
9
10
11
12

v-show始终保持在页面上，只是通过改变css样式来改变是否在页面上显示。

九、v-for列表渲染

1.对数组的遍历

语法：item,index in items

各个表示：item是数组元素，可以取任何名字，只要符合命名规则；items是要渲染列表数组的名称，与数组名相同；in是固定的，不可改变；index表示数组元素的索引。

{{item}}即可遍历获得数组的内容。

2.对对象属性的遍历

语法：value,key in object

各个表示：value代表的是对象的属性的值，可以取任意名字，只要符合命名规则；object表示要遍历的对象，与对象名相同；key表示对应属性的名称。

{{value}}即可遍历获得对象的属性。

十、事件绑定,click=“函数”

常见事件修饰符

.stop：阻止单击事件继续传播，完成当前事件后就停止执行。
.prevent：提交事件不再重载页面。
修饰符可以串联，也可以只有修饰符。
.capture 添加事件监听器时使用事件捕获模式 ，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理。

十一、表单输入双向绑定v-model

十二、组件基础Vue.component()函数创建新组建

自定义的元素，带有自己的名字。
语法：Vue.component(“自定义的名字”,对象)

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15