Vue.js使用流程

【vue.js使用流程】

1.导入vue.js。

2.准备好界面。

3.实例化一个vue，并且将这个界面交给vue管理。

4.{{ vue里的变量 }}，可以输出这个变量的值。

 

 

1.Vue的基础使用

实例

1. 

运行结果

 二.插值语法

1. 简单插值
   1，字面量，number，string，boolean等
   2，四则运算，+，-，*，/,%, （这里+可以做字符串拼接）
   3，逻辑运算，&&，||，！
   4，三目运算、
   5，全局函数
2. 复杂插值
   1，对象
   2，数组
   3，对象数组
3. 功能：用于解析标签体内容
4. 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
5. 实例

 案例结果

三.Vue V-html,V-text语法使用 

结果

 

 四.双向奔赴“V-model指令

Vue中有 2 种数据绑定的方式：

单向绑定(v-bind)：数据只能从data流向页面
双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：

双向绑定一般都应用在表单类元素上（如：input、select等）
v-model:value可以简写为v-model，因为v-model默认收集的就是value值。

在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定

案例

案例 结果

2、Vue生命周期钩子函数

 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染、更新、渲染到销毁等一系列过程，称为Vue的生命周期。

通俗说Vue实例从创建到销毁的过程，就是它的生命周期.

 

每个Vue实例创建时，都会经历一些系列的初始化过程，同时也会调用相应的生命周期函数，这些生命周期函数称为“钩子函数”

开发者可以利用这些钩子函数，在合适的时机执行相关业务逻辑代码。