vue学习笔记

Vue学习笔记总结

一入前端深似海，在前端的工作过程中我们只有不断的学习新技术，才能不被淘汰，之前学习Vue的时候做了一些总结，现在把它整理出来，希望能帮助一些还没有上手的同学迅速上手。 

下面我们就进入正题了。

首先，了解软件的人人都知道，了解一门语言，或者学习一门新技术，编写Hello World是最基础的。

下面就来看个例子。

   
       
       
       
   


   
       
       

            {{ message }}
       

   
   





提到Vue不得不说的双向绑定。

双向绑定示例

HTML代码：

   

{{ message }}

   

Vue代码：

var vue = new Vue({
        el: '#app',
data: {
message: 'Hello Vue!'
}
  })

下面介绍Vue常用指令：

v-if指令
v-show指令
v-else指令
v-for指令
v-bind指令
v-on指令


v-if指令

Hello, Vue.js!

var vm = new Vue({
      el: '#app',
data: {
//see为true显示，为false不显示
        see:false
        }

})

v-show指令

Hello, Vue.js!

var vm = new Vue({
      el: '#app',
data: {
//see为true显示，为false不显示
        see:false
        }
})




这里不得不说一下：v-if指令和v-show指令的区别：

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素

v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。

注意：v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。

总结：v-if会根据表达式的真假来决定是否创建HTML，而v-show是不管真假都会创建HTML，只是根据表达式真假来隐藏或者显示元素。

v-else指令

可以用v-else指令为v-if或v-show添加一个“else块”，v-else元素必须立即跟在v-if或v-show元素的后面，否则它不能被识别。

Age: {{ age }}

Name: {{ name }}

---------------------分割线---------------------

Name: {{ name }}

Sex: {{ sex }}

var vm = new Vue({
el: '#app',
data: {
age: 26,
name: 'daisy',
sex: 'women'
}
})


注意：和前面的v-if指令和v-show指令一样，在v-if后的v-else，如果v-if为true，v-else不会渲染到HTML中，v-show为tue，但是后面的v-else仍然渲染到HTML了。


v-for指令

Name	Age	Sex
{{ person.name  }}	{{ person.age  }}	{{ person.sex  }}

 var vm = new Vue({
            el: '#app',
            data: {
                people: [{
                    name: 'daisy',
                    age:22,
                    sex: 'Male'
                }, {
                    name: 'petter',
                    age: 26,
                    sex: 'Male'
                }, {
                    name: 'Tracy',
                    age: 24,
                    sex: 'women'
                }, {
                    name: 'Chris',
                    age: 38,
                    sex: 'Male'
                }]
            }
        })






v-bind指令

           

               
• 
                      {{ n + 1 }}
                 

           

       

var vm = new Vue({
            el: '#app',
            data: {
                activeNumber: 1,
                pageCount: 10
            }
        })




v-on指令


 Hi


var vm = new Vue({
            el: '#app',
            // 在 `methods` 对象中定义方法
            methods: {
                say: function(msg) {
                    alert(msg)
                }
            }
        })

v-bind和v-on的缩写

v-bind缩写:

v-on缩写@