尚硅谷VUE学习笔记一(vue的特点/实现/安装Vue)

vue的特点:

• 采用组件化模式 ,提高代码的复用率.且让代码更好维护
• 声明式编码,让编码人员无需参与DOM,提高代码的开发效
• 使用虚拟DOM+Diff算法,尽量使用DOM节点

01_VUE实现:

学习VUE之前需要掌握的JS知识

安装Vue

将vue的浏览器开发环境 放在谷歌的扩展程序中

 阻止Vue在启动时生成生产提示.

02_hello_word小案例 

 总结

初始Vue:
   1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象:
   2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法:
   3.root容器里的代码成为[vue模板]:
   4.Vue实例和容器是一一对应的
   5.真实开发中只有一个Vue实例.并且会配合着组件一起使用
   6.{{xxx}}}中的xxx要写js表达式,且xxx可以自动读取到data中所有属性:
   7.一旦data中的数据发生改变,那么模板中用到读取数据的地方也会自动更新:

   注意区分: js表达式 和 js代码(语句)
      1. 表达式: 一个表达式会产生一个值. 可以放在任何一个需要值的地方:
         (1) a
         (2) b+a
         (3) demo(1)
         (3) x === y ? 'a' : 'b'
      2. js代码(语句)
         (1). if(){}
         (2). for(){}

 02_模板语法

    Vue模板语法有两大类:
      1.插值语法:
         功能: 用于解析标签体内容
         写法: {{xxx}} xxx是js表达式. 且可以直接读取到data中所有的属性
      2.指令语法:
         功能: 用于解析标签(包括: 标签属性、标签内容、绑定事件....)
         举例: v-bind:"xxx" 或 简写为 :href="xxx", xxx同样要写js表达式
             且可以直接读取到data中的所有属性
         备注: Vue中有很多的指令, 且形式都是: v-????, 此处我们只是拿v-bind js表达式

03_数据绑定

Vue中有2中数据绑定的方式:

        1.单向绑定(v-bind):数据只能从data流向页面.

        2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data.

                 备注: 1.双向绑定一般都应用在表单类元素上(如:input,select等)

                           2.v-model:value 可以简写为v-model. 因为v-model默认收集的就是value的值 

04_el和data的两种写法

 el的两种写法

data的两种写法

总结:

el和data的两种写法
    1.el有两种写法
        (1).new Vue时候配置el属性.
        (2).先创建Vue实例,随后再他用过vm.$mount('#root')指定el的值
    2.data有两种写法
        (1).对象式
        (2).函数式
        如何选择:目前那种写法都可以,以后学习到组件时,data必须用函数式,否则会报错
    3.一个重要的原则:
        由Vue管理的函数,一定不要使用箭头函数,this就不是Vue实例了

05_Vue中 MVVM模型

总结:

MVVM模型
    1. M : 模型(Model) : data中的数据
    2. V : 视图(View) : 模板代码
    3. VM : (ViewModel) : Vue实例
观察发现:
    1.data中所有的属性,最后都出现在了vm身上
    2.vm身上搜有的属性 及 Vue原型上所有的属性,在Vue模板中都可以直接使用.

 06_数据代理

 1.回顾Object.defineProperty方法

 2.何为数据代理

3.Vue中的数据代理

 总结:

1.Vue中的数据代理:
    通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处
    更加方便的操作data中的数据
3.基本原理:
    通过Object.defineProperty()把打他对象中的所有属性添加到vm上,
    为每一个添加到vm上的属性,都指定一个getter/setter.
    在getter/setter内部中去操作(读/写)data中对应的属性