vue.js笔记-1

vue特点

• 易用：已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
• 灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
• 高效：20kB min+gzip 运行大小，超快虚拟 DOM，最省心的优化

vue使用的框架

vue中按照mvvm的架构去进行实现的

• mvvm: m：model v: view vm: viewmodel

面试题：

• model层数据变化的时候，为什么vm就可以知道数据发生变化了呀？
  vue的双向数据绑定的原理？

vue在创建vm的时候，会将数据配置到实例中，然后通过Object.defineProperty方法，为数据动态的添加getter与setter方法。
当获取数据的时候，会触发对应的getter方法，当设置数据的时候，触发对应的setter方法。
然后当setter方法触发完成的时候，内部会进一步触发watcher,当数据改变了，视图则更新操作完毕。

vue基本语法

创建vue实例

<script>
    new Vue({
        el:"#app" ,//指代挂载点，运用到哪一个dom元素上
        data:{//管理的数据
            msg:"hello world",
            num:2,
            bool:false,
            und:undefined,
            nulls:null,
            fn:function(){return 3},
            arr:[1,2,3]
            a:"<a href='#'>点我跳转<a>"
        }
    })
</script>

Mustang语法

{{ 文本 }}

• =>{{“你好，世界”}}
• =>文本内容必须拿引号套起来

{{ html }}

• =>{{}}直接写入一个html会无法去除两个花括号，

• =>但可以引用该标签的功能（加粗，跳转,倾斜…）

• =>如果直接写入的是一个块级元素，还会独占一行花括号在上下显示

• =>需要通过v-html指令来实现

• =>v-html慎用，容易受到XSS、CSRF攻击 ，解决方案如下

(1) 前端过滤 （前端采用正则将容易注入的字符<等过滤掉）
(2) 后台转义( < > 换成 &lt &gt )

{{ 变量名 }}

• =>data里面的数据可以是任意类型
• =>undefined和NULL是无法通过{{}}渲染在页面上的
• =>{{}}里不能写jq语句只能通过表达式渲染出来
• =>可以写三元表达式

   <div id="app">
        <p>{{msg}}</p> //hello world
        <p>{{ num+1 }}</p> //3
        <p>{{bool}}</p> //false
        <p>{{und}}</p> //不显示
        <p>{{nulls}}</p> //不显示
        <p>{{fn}}</p> // function(){return 3}
        <p>{{fn()}}</p> //3
        <p>{{arr}}</p> //[1,2,3]
        <!-- <p>{{if(true) console.log(11111)}}</p> --> //报错
        <!-- <p>{{var a = 10}}</p> --> //报错
        <p>{{3>2?"大于":"小于"}}</p> //大于
        <p>{{a}}</p>//<a href='#'>点我跳转<a>
       <p>{{<a href='#'>点我跳转<a>}}</p>//{{点我跳转}} 可以跳转
        <p v-html="a"></p>//点我跳转  可以跳转
    </div>

v-for指令

v-for遍历数组

第一个代表数组里面的元素，第二个代表该元素的索引号，（）可以省略

<div id="app">    
    <ul>
        <li v-for="(item,index) of arr">{{index+1}} / {{item}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            arr:["苹果","香蕉","橘子"]
        }
    })
</script>

v-for遍历对象

第一个代表对象里面的键值，第二个代表键名，第三个代表索引（）可以省略

<div id="app">
    <p v-for="(value,key,index) in person">{{index+1}} {{key}}  {{value}}</p>
</div>
<script>
    //v-for不仅可以用来遍历数组，还可以用来遍历对象
    new Vue({
        el:"#app",
        data:{
            person:{
                name:"张三",
                age:20,
                sex:"男"
            }
        }
    })
</script>

template

进行多标签的循环，(不想额外形成新的标签 )外面套上template
=>template标签在浏览器页面中不会显示
=>可以使用v-for和v-If

<template v-for="i in 3">
    <div>我是div元素</div>
    <p>我是p元素哦....</p>
</template>

数组更新检测

• =>Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。

• =>非变异就是那些会产生新数组的方法，变异就是改变原数组的方法

     push()          数组的添加元素            返回数组的长度
     pop()           从后面删除一个元素        返回删除的元素
     shift()         从前面删除一个元素        返回删除的元素
     unshift()       从数组的前面追加元素      返回数组的长度
     splice()        数组的剪贴、删除、插入
     sort()          数组的排序
     reverse()       数组的反转
  

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
1.当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
例子：

 var vm = new Vue({
            el:"#app",
            data:{
                arr:[1,2,3]
            }
        })

vm.arr[2] = 30; //这样通过下标的方式更改数组，没用！
方法一：Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue)

vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：

Vue.set(vm.arr, 2, 30) //如果在实例中可以通过 this.$set(vm.arr, 2, 30)
方法二：vm.items.splice(indexOfItem, 1, newValue)
vm.arr.splice(2, 1, 300)

1.当你修改长度时，例如： vm.items.length = newLength
vm.arr.length = 2;//这样通过length的方式更改数组，没用！
方法：vm.items.splice(newLength)
vm.arr.splice(2)