条件指令可以控制元素的创建(显示)或者销毁(隐藏)
<script src="./js/vue.js"></script> </head> <body> <div id="app"> <!-- false 表示隐藏（删除 -- 销毁 标签隐藏） --> <div v-if="bool1">v-if</div> <div v-else>else</div> <!-- 多重渲染的写法 --> <div v-if="type == 'A'">A</div> <div v-else-if="type == 'B'">B</div> <div v-else>daqiu</div> <!-- v-show="bool":true显示 false隐藏display：none --> <div v-show="bool1">v-show</div> </div> <script> var vm = new Vue({ el: '#app', data: { bool1: true, bool2: false, type: 'A' } }) </script> </body>v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象
<div id="app"> <!-- v-for="临时变量 in 列表" --> <ul> <li v-for="i in list1">{{ i }}</li> </ul> <ul> <!-- <li v-for="(i,j) in list"></li> --> <!-- i:数据；j：下标 --> <li v-for="(i, j) in list1">{{j+1}}、{{i}}</li> </ul> <ul> <!-- js对象 --> <!-- i 表示的是value --> <li v-for="i in dict1">{{ i }}</li> </ul> <ul> <!-- i:表示value，j：key值 --> <li v-for="(value, key) in dict1">{{j}}:{{i}}</li> </ul> </div> <script> var vm = new Vue({ el: '#app', data: { // 数组 list1: ['一', '二', '三'], // 字典对象 dict1:{'name':'张三','age':30} } }) </script>v-model 指令用于设置表单控件value属性值 数据双向绑定：当数据发生变化的时候,视图也就发生变化,当视图发生变化时,数据也会跟着同步变化
<div id="app"> <!-- v-model的值用于设置表单控件value属性值--> <input type="text" v-model="txt1"> <div>{{txt1}}</div> </div> <script> var vm = new Vue({ el: '#app', data: { txt1: '默认值', } }) </script>每个Vue实例在被创建到销毁要经过一系列的过程，这整个过程称为Vue实例的生命周期 Vue在生命周期不同的阶段点会自动运行一些函数， 这些函数称为Vue生命周期的钩子(hook)函数
生命周期钩子函数:beforeCreate:在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
created : 在实例创建完成后被立即调用
beforeMount :在挂载开始之前被调用：相关的 render 函数首次被调用
mounted（最常用）: 实例挂载到dom之后被调用，可以当成是vue对象的ready方法来使用
beforeUpdate: 数据发生变化前调用 updated 数据发生变化后调用
destroyed :Vue实例销毁后调用
axios参数
// 引入函数库 <script src="js/vue.min.js"></script> <script src="js/axios.min.js"></script> <script> var vm=new Vue({ el:'', data:{}, mounted:function(){ //mounted 生命周期方法 axios({ //请求方式 method: 'get', //请求路径 url: '/user/12345', //请求参数 data: { name: 'xxx', pwd: 'yyy', } }) //访问成功回调的方法 .then(function(dat){ console.log(dat) }) //访问失败回调的方法 .catch(function(e){ }), }, }) </script>复杂逻辑的表达式，使用计算属性
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> <script> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, // 计算属性 computed: { reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }, //侦听属性 watch:{ iNum:function(newval,oldval){ console.log(newval + ' | ' + oldval) } }, }) </script>侦听属性的作用是侦听某属性值的变化，从而做相应的操作，侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数,当你侦听的元素发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。
