Vue 基础语法

创建一个 vue 实例

---

    
    
    




    
{{msg}}

    
    

挂载点，模板与实例

---

    
    
    




    

        {{msg}}
        
    

    
    

• 实例：使用 new 关键字，生成一个实例
• 挂载点：实例中 el 后面的 dom 元素就是挂载点。
• 模板：实例中 template 后面指定的 html 内容就是模板。也可以直接在挂载点的内部

实例中数据，事件与方法

---

    
    
    




    

        
        

            {{content}}
            
        
    

    
    

数据展示

像这样通过 {{DATA}} 来传递的方式称为插值表达式。除了使用插值表达式之外，还可以使用以下方式来绑定：

• v-text：转义内容，以文本方式显示(如

  Hello

  显示

  Hello

  )
• v-html：不转义内容，以 html 方式显示(如

  Hello

  显示粗体的 Hello)

绑定事件

v-on:ACTION="FUNC"：点击后执行某操作，​FUNC 函数定义在实例的 methods 中。其中 v-on: 可以简写成 @ 符号，即可以等价为 @ACTION="FUNC"，如：@click="handleClick"

方法定义

方法写在 vue 实例的 methods 后面，要操作原 dom 的值使用 this 关键字。

原来我们操作 html 内容时，是面向 dom 元素去编程，现在在 vue 中我们是面向 data 数据编程。当 data 发生改变，页面自动就会发生变化

属性绑定和双向数据绑定

---

    
    
    



    

        
        
hello world
        
        
{{content}}
    
    
    

title 是 html 的一个属性，功能是当鼠标放到内容上，显示 title 后面的值，起到提示的作用。

属性绑定

v-bind:ATTR="xxx" 模板指令用于绑定 html 属性。模板指令等号(=)后面跟的是一个 js 表达式，在里面可以写 js。其中 v-bind: 可以简写成 :。

双向数据绑定

• 单向绑定：数据决定页面显示，但页面无法影响数据内容。
• 双向绑定：页面内容发生改变时，数据也会被改变。data 发生改变了，页面显示内容也发生改变。

想要实现双向绑定，就要使用：v-model 模板指令，它包含了属性绑定的功能。

计算属性和侦听器

---

    
    
    



    

        
        姓：
        名：
        
{{fullName}}
        
{{count}}
    
    
    

计算属性

在实例中使用 computed 计算属性是指一个属性是通过其他属性计算而来。在以上实例中我们使用​ computed 来计算生成 fullName。computed 会使用上一次的缓存，只有当一个或多个属性值发生变化是它才会重新计算。

computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

侦听器

场景：当我们修改 firstName 或 lastName 后，count 就增加 1，如何来实现呢？
我们使用 watch 侦听器，它是指去侦听某一个数据的变化，一量数据发生变化，就可以在侦听器里做相关业务逻辑操作。

v-if, v-show 与 v-for 指令

---

    
    
    



    

        
        
hello world
        toggle
        

            
{{item}}
        
    
    
    

点击 toggle 按钮来显示/隐藏 hello world。

v-if 和 v-show

• v-if：是否存在，添加/删除 dom 元素。
• v-show：是否显示，显示/隐藏 dom 元素，display:none。

v-for

将数据循环展示到页面中，添加 key 值会提高渲染性能。key 值的要求是必须在每次循环中唯一。