vue学习笔记（二）

目录

1、vue中的MVVM

2、插值操作（几种Vue指令）

3、动态绑定属性

1、vue中的MVVM

MVVM分为View层、Model层和VueModel层。详见百度百科MVVM。

2、插值操作（几种Vue指令）

v-once指令

在某些情况下，我们可能不希望界面随意的跟随改变，这个时候就可以使用一个Vue的指令v-once：

★ 该指令后面不需要跟任何表达式

★ 该指令表示元素和组件只渲染一次不会随着数据的改变而改变

<code>


    
    <title>Title/<title>



    
{{message}}

    
{{message}}




 


/<code>

​

v-html

某些情况下，我们从服务器请求到的数据本身就是一个html代码，如果直接通过{{}}来输出，会将html代码一起输出，但是我们可能希望的是按照html格式进行解析，并且显示对应的内容。因此可以使用Vue指令的v-html：

★ 该指令后面往往会跟上一个string类型

★ 会将string的html解析出来并且渲染

<code>


    
    <title>Title/<title>



    
{{url}}

    
{{url}}






/<code>

​

v-text

v-text作用和Mustache比较相似：都是用于将数据显示在界面中，通常情况下接受一个string类型

<code>


    
    <title>v-text指令/<title>


 

    
{{message}}

    






/<code>

​

v-pre

<code>


    
    <title>v-pre/<title>



    
{{message}}

    
{{message}}






/<code>

​

v-cloak

在某些情况下，我们浏览器可能会直接显示出未编译的Mustache标签

<code>


    
    <title>v-cloak/<title>




    {{message}}





/<code>

​

延迟1秒后

​

3、动态绑定属性

v-bind：

用于绑定一个或多个属性值，或者向另一个组件传递props值，例如在开发中，图片的链接src、网站的链接href、一些类等都会用到动态绑定。语法糖为

<code>


    
    <title>v-bind/<title>



    
    
    
    
    
    





/<code>

​

v-bind动态绑定class之一（对象语法）

<code>


    
    <title>v-bind动态绑定class(一)/<title>
    


    

        
        

        
        
        
{{message}}

    






/<code>

​

v-bind动态绑定class之二（数组语法）

<code>


    
    <title>v-bind动态绑定（数组语法）/<title>



    
{{message}}

 





/<code>

​

v-bind绑定style之一（对象语法）

<code>


    
    <title>对象语法/<title>



    

    
    

    
    
{{message}}

    
{{message}}



 




/<code>

v-bind绑定style之二（数组语法）

<code>


    
    <title>数组语法/<title>



    
    
{{message}}






/<code>

閱讀更多 想做大牛的程序猿 的文章

關鍵字: 目录 百度百科 学习