vue基础使用和指令

1.基础使用

1. 

可以使用cdn

也可以保存在本地，使用时，导入即可

 小案例：点击自动切换图片

    
    
    



    点我换图片
    

2.插值语法

    
    
    




    
字符串：{{name}}
    
数字：{{age}}
    
数组：{{hobby}}--->{{hobby[1]}}
    
对象：{{wife}}--->{{wife['name']}}---->{{wife.age}}
    
标签形式字符串：{{a}}--->说明不存在xss攻击
    
-----插值语法，还可以放，简单表达式和函数(后面了)-----
    
简单表达是：{{1 + 1}}
    
三目运算符【条件?符合条件执行这个:不符合条件】：{{10>2?'正确':'不正确'}}

3.文本指令

# v-text:把变量渲染在标签内部
# v-html：把标签类型的字符串直接渲染成标签
# v-if: 控制标签显示与否，直接删除或加入标签
# v-show:控制标签显示与否，通过样式的display: none;控制显示与否

4.事件指令

# 用的最多的就是点击事件，给某个标签绑定一个点击事件，当点击一下，就执行某个函数

# 使用方式
v-on:事件名='函数名'
# 重点：v-on:事件='函数名'
可以简写成：
@事件='函数名'

 

    
    
     



    点我换图片
    

5.属性指令

# 标签上   name   id  class  src  href ,height  属性
    如果这样，name='xx' 就写死了，我们想动态的绑定变量，变量变化，属性的值也变化
    
    
#  v-bind:属性名='变量'
# 简写成： :属性名='变量'

 案例同事件指令

6.条件渲染-------v-if

案例如下：

    
    
    





    
优秀
    
良好
    
及格
    
不及格

7.v-for---循环

v-for  都可以循环  -----# 数字，字符串，数组，对象

# 看到别人写v-for时，在标签上都会加一个 key 属性，目的是为了提高虚拟dom的替换效率

# key 的值必须唯一，如果不唯一就报错

###### 以后如果数据变了，页面没有发生变化#####
Vue.set(对象, key, value)
Vue.set(数组, 索引, 值)
 

案例：显示购物车

    
    
    
    





    

        

            

                
购物车
                

                    加载购物车
                

                

                    

                    

                        
id号
                        
商品名
                        
商品价格
                        
商品数量
                    
                    
                    

                    

                        
{{good.id}}
                        
{{good.name}}
                        
{{good.price}}
                        
{{good.count}}