Vue2.0 初始化及简单绑定

vue的初始化

vue的插值(angular里的表达式)

{{5*4}}
{{[1,2,3].reverse().join("-")}}
{{5>4 ? "真":"假"}}

如何初始化一组数据

初始化一组值后 可以用插值输出

        new Vue({//初始化 Vue 实例
            el:"#box", //指定挂载元素
            data : {//初始化数据
                msg : "Hello Vue!!!"
            }
        })
    

{{msg}}

Vue绑定

绑定属性

列举上课的例子
1, 给span一个title属性 title="这是title"
2.想把title的值换成初始化数据的值"msg", 用普通的{{}} 和数据名并不可行
这里引用 "v-bind:" 写成 "v-bind:title='msg' ",能够正常显示
3.在数据中初始化一个样式对象 给span绑定样式 "v-bind:style='styleObject' ".这样把样式又绑定在span上
4.定义一个变量"vm"来接收 new Vue的实例 这样vm可以得到初始化数据上的所有数据(可以打印一下vm ,在控制台查看一下)
5.可以不指定挂载元素 直接写上 vm.$mount("元素") 也是等同的
综合上面附上原码理解

    
        
        
    
    
        

            鼠标停一下
        
        
    
    
    

绑定的深入

1.在vue中务必一定要data中初始化要使用的数据,否则会抛出警告
2.:attr 是 v-bind:attr的简写形式 (:style====v-bind:style)
3.vue绑定样式时 与原生样式混合时 vue绑定的样式等级会高些,也就是vue绑定的样式可以覆盖原生的样式
4.多个 以数组的形式绑定 :class="[a,b]"
5.现在data中初始化一个变量 isShow 为true

    
        
        
        

    
    
        

            {{666}}
            鼠标停一下
            
            第二个
            
            

                内容
            
            
            
内容二
            
            
内容三

            

                style数组写法
            

        
    
    
    
```