Vue基础知识2_vue 中i-优快云博客

本文围绕Vue展开，介绍了条件渲染和列表渲染指令，阐述表单数据绑定的v-model指令及数据双向绑定原理。讲解了Vue实例的生命周期及各阶段钩子函数，还提及axios与服务器数据交互，最后介绍了计算属性、侦听属性等扩展内容。

1.条件渲染

条件指令可以控制元素的创建(显示)或者销毁(隐藏)

<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>

2.列表渲染

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>

3.表单数据绑定

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>

4.vue.js的生命周期

每个Vue实例在被创建到销毁要经过一系列的过程，这整个过程称为Vue实例的生命周期
Vue在生命周期不同的阶段点会自动运行一些函数，这些函数称为Vue生命周期的钩子(hook)函数

生命周期钩子函数:

beforeCreate:在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

created : 在实例创建完成后被立即调用

beforeMount :在挂载开始之前被调用：相关的 render 函数首次被调用

mounted（最常用）: 实例挂载到dom之后被调用，可以当成是vue对象的ready方法来使用

beforeUpdate: 数据发生变化前调用
updated 数据发生变化后调用

destroyed :Vue实例销毁后调用

5.axios()与服务器数据交互

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>

6.扩展

6.1计算属性

复杂逻辑的表达式，使用计算属性

   <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>

6.2侦听属性

侦听属性的作用是侦听某属性值的变化，从而做相应的操作，侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数,当你侦听的元素发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。

6.3过滤器

<div id="app">{{20 | RMB}}</div>
<script>  
      var vm = new Vue({
        el: '#app',
        data: {},
        filters:{
		  RMB:function(value){
		    if(value=='') {return;}
		    return '¥ '+value;
		  }
		},
      })
</script>