Vue新手入门实例分析

• data

Vue 中的 data 用于声明我们所要使用的数据，这样操作有利于我们在维护或者操作文档的时候能够更容易的清晰某一板块所需要修改的数据，并且不需要直接对 DOM 进行操作，此时的数据与 DOM 是双向绑定的，当我们对 data 中所声明的数据进行修改时，DOM 中同时也会发生响应式的变化。

• methods

Methods 中包含的是我们对这个页面的整个逻辑以及页面中的触发事件，其中的内容相当于 JavaScript 中的 function 内容

2. 内置指令

在 Vue 中有许多内置指令，通过这些指令替换 JavaScript 中对文档的以及事件的操作。

• v-html

v-html:将数据以 html 标签形式更新

                 
                
{{website}}
          
{{website}}
     

可以发现，第二个

标签中所绑定的 Vue.js 被 hello，word！所更新，并且在声明的 message 中'

hello,word!<\h2>'通过 html 标签更新了其中的内容，看到的这是一个一级标题的 hello，word！。

• v-text

               
                
{{website}}
          
{{website}}
     

通过 v-txet 指令，尽管仍然替换掉了

标签中的内容，但是仅仅是通过字符串的形式显示了出来，而不是像 html 一样通过 html 标签的形式显示。

• v-cloak

代码加载的时候先加载 HTML，把插值语法当做 HTML 内容加载到页面上，当加载完 js 后才把插值语法替换掉，所以我们会看到闪烁问题，而 v-clock 可以解决这个问题。

{{msg}}

• v-once

v-once 指令只渲染元素和组件一次，随后的渲染，使用了此指令的元素、组件及其所有的子节点，都会当作静态内容并跳过，这个可以用于优化更新性能。

             
                
can not change:{{website}}
             
change: {{website}}
             
     

• v-on

对于 Vue 的事件绑定使用内置的 v-on 指令来完成，以及传递参数。

在 v-on:click 点击事件后面添加了命名为 alert 的方法，在此之前我试过直接使用v-on:click="alert('触发了点击事件')"，但是点击之后控制台报错，不知道有没有大神明白为什么会这个样子。

使用 v-on 指令时，不仅仅可以触发点击事件，譬如双击事件以及键盘敲击事件等等，只需要修改 v-on:click or(mousedown、mouseup等)，同时我们可以将 v-on:click 简写为 @click，触发事件的方法必须写在 methods 中。

• v-if

v-if、v-show 可以实现条件渲染，Vue 会根据表达式值的真假条件来渲染元素。还有可以与 v-if 搭配的 v-else、v-else-if 指令，类似与 JavaScript 中的 if-else。

简单来说，v-if相当于 JavaScript 中我们对 DOM 的条件操作，根据表达值的真假，从而对 DOM 进行有条件的操作，让我们来看看是如何操作的把。

                   
                           
我跳出来拉
     

注意，v-if 的默认布尔值为 false，并且 v-if 是直接对 DOM 的操作，而随后的 v-show 是对样式的操作。

• v-show

v-show用法与v-if大致一样，不同的是带有 v-show 的元素始终会被渲染并且保留在 DOM中，v-show只是简单地切换元素的 CSS 属性 display，当模板属性为 true 的时候，控制台显示为 display:block；属性值为 false 的时候，控制台显示display:none。
v-show不支持 语法,也不支持 v-else。

        
                                 
我跳出来拉
        

v-show与v-if的区别

1. 都是根据表达式的真假判断元素显示与隐藏

2. v-if只有在条件为真时，才对元素进行渲染，v-show无论初始条件为何，元素总会被渲染。

3. v-show初始开销更高，v-if的切换开销更高

4. 频繁切换时用v-show；运行条件很少改变时用v-if

• v-for

在 Vue 中，提供了 v-for 指令用来循环数据。

                   
             开始循环         
                       {{index}}               
     

                    
             开始循环         
//index表示数组中的元素，items表实元素的下标                   {{index}},{{items}}             
     

• v-model

• 关于 v-model 最重要的就是 双向数据绑定。使用 Vue 操作 DOM 元素时，视图与数据依照任何的一方同时发生改变。

        
        输入内容：
            反转内容：{{reversedMessage}}    

当我们在 input 输入框里面输入值时，所绑定的 message 属性值也发生了变化，当绑定成功，我们在 input 中输入的任何合法字符串或者数字时，Vue 都会重新更新 message 的属性值，从而符合我们所输入的值，再通过 reversedMessage 方法将 message 颠倒过来重新打印在=={{reversedMessage}}==，由于是双向数据绑定，三者是同时发生的。

• v-bind

v-bind 的作用是为元素绑定属性，写法v-bind:属性名，可以简写为":属性名"。

无论是 class 还是其他标签，都可以通过":标签名"来为元素绑定属性。对于绑定的元素内容是作为一个 JavaScript 变量，故而可以对其进行编写 JavaScript 的表达式。

"Vue新手入门实例分析"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！