初学Vue 常用指令与生命周期

初学vue

Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。

官网：https://v2.cn.vuejs.org/

框架是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。

基于框架进行开发，更加快捷，更加高效。

1.新建html页面，引入vue.js文件

<script src="js/vue.js"></script>

2.在JS代码区域，创建Vue核心对象，定义数据模型

new Vue({
	el:"#app",
    data:{
		message:"Hello Vue!"
    }
})

3.在body中编写视图

<div id="app">
    <input type="text" v-model="message">
    {{message}}
</div>

4.插值表达式：

形式：{{表达式}}

内容可以是

• 变量
• 三元运算符
• 函数调用
• 算术运算

一、Vue常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如：v-if,v-for…

常用指令

指令	作用
v-bind	为HTML标签绑定属性值，如设置href,css等
v-model	在表单元素上创建双向数据绑定
v-on	为html标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象属性

常用指令：

• v-bind

<a v-bind:href="url">学习VUE</a>
<a:href="url">学习VUE</a>

• v-model

<input type="text" v-model="url">

//在script定义Vue
new Vue({
    el: "#app",//vue接管区域
    data: {
      url: "https://www.baidu.com"
    }
  })

注意事项：通过v-bind或者是v-model绑定的变量，必须在数据模型中声明。

• v-on

<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">

//在script定义Vue
new Vue({
    el: "#app",//vue接管区域
    data: {
    },
    methods: {
      handle: function () {
        alert("您点我了一下");
      }
    }
  })

• v-if

年龄{{age}},经判定：

<span v-if="age <=35">年轻人</span>
<span v-else-if="age>35 && age <=60">中年人</span>
<span v-else>老年人</span>

• v-show

年龄{{age}},经判定：
<span v-show="age <=35">年轻人</span>
<span v-show="age>35 && age <=60">中年人</span>
<span v-show="age >60">老年人</span>

• v-for

<div v-for="addr in addrs">{{addr}}</div>

<div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>

data:{

...

addrs:['北京','上海','广州','深圳','成都']

}，

二、Vue生命周期

生命周期：指一个对象从创建到销毁的整个过程

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）。

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestory	销毁前
destroyed	销毁后

 //定义Vue对象
  new Vue({
    el: "#app",//vue接管区域
    data: {

    },
    mounted() {
      alert("VUE挂载完成,发送请求到服务端");
    },
    methods: {
    },
  })

mounted：挂载完成，vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）