vue-1

MVVM框架

数据可以影响视图视图可影响数据。

基本结构

引入：

html部分:

script部分:

表达式

{{msg}}-->显示 、{{msg=320}}-->赋值 、{{bok?"haha":"wuwu"}}-->三目

   

     
{{mas}} {{msg=320}} {{bok?"haha":"wuwu"}}
   
   
    

声明式渲染

{{msg}}

1. 动态绑定数据(动态更改dom属性) v-bind:title（会爆红），可直接写成 :title
2. 条件判断 v-if

    点击显示和隐藏
    
看我

3. 点击事件：v-on：click--->简写为 @click
4. 循环 v-for

// 数组

    
 {{item}}


    
{{item}}我的索引是{{index}}

//JSON

    
{{index}}的名字是{{item.name}}

//对象
    

        
{{index}}的值{{item}}
    

5. 事件绑定

需求点击按钮翻转文字

 

     点我翻转文字
     
{{msg}}
 
 

6. 视图影响数据 v-model

v-once 只被影响一次 后面视图改变数据不改变

    
{{msg}}
    
    
{{msg}}

7. 渲染标签 v-html

8. 自定义组建

组建需要注册Vue.component('组建名',{props:['属性名'],template:'

{{todo}}

'});

• 我定义了属性名为 todo,todo的msg的值是data里面msg的值,而li拿的是todo的值

• 数组--》使用自定义组建，通过自定义属性给自定义组建传数据

9. v-show和v-if

   

        点击显示隐藏
       
你能看见我吗
//display:none
       
你能看见我吗
//appendChild和removeChild
   
    

10. 购物车小例子

使用技术：bootstrap和vue2

npm init --y
npm i --save-dev vue bootstrap

代码：

 
 

 

 




 

     

         

             
购物车
             

                 
商品名称
                 
商品价格
                 
操作
             
             

                 
{{item.name}}
                 
{{item.price}}
                 

                     删除
                     
                 
             
             

                 

                     
                         删除全部
                     
                 
             
         
         

             

                 商品名称
                 
             
             

                 价格
                 
             
             

                 添加
                 重置
             
         
     

 

vue-2