vue 基础 el data name V-once v-html v-bind v-model

01、VUE 选择器：

每个框架基于对DOM的操作，能对DOM进行操作都必须获取DOM元素；
vue获取DOM的方式为：el：'类名'

{{name}}
          

vue 为构造函数 必须先实例化；

console.log( oBox.$el )  规定是 $el

02、data对象属性

data为对象，本身没有数据，而是通过一些方法获取数据

{{ name }}
var oBox = new Vue({
      el: '#box',
      data: {
          name: '明天您好‘
  }

})

• {{ name }} 数据绑定的一种方法：
  div 标签将会被替代为对应数据对象上 name 属性的值。无论何时，绑定的数据对象上 name 属性发生了改变，插值处的内容都会更新。

另外写法：

var obj = {                
      name: '明天您好'  // 这里相当于一个厂商 在生产一些数据
}
var oBox = new Vue({  
      el: '#box',
      data: obj     // vue data没数据 通过里面get name的函数 来访问json的
})

get name函数 相当于:

function fn(){
    return obj.name
}
fn();

• v-html 会解析标签 如 js中innerHTML

数据的修改

oBox.name = '明天会更好'   // 修改name数据
oBox.name === obj.name   // true

• [v-once 指令]你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

{{ name }}
var oBox = new Vue({
      el: '#box',
      data: {
          name: '明天您好‘
  }
})
oBox.name = '明天会更好'

$watch 观察对象数据变化

语法： obj.$watch( '观察的数据名'，function ( newVal , oldVal ){} )
newVal 为新的数据 oldVal 为旧的数据

数据的绑定

01、v-bind 绑定
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
v-bind:属性名 = 'vue data里的属性'

• 绑定属性：

      

          点击转到百度上
      
        

v-bind:href="href"  绑定href这个属性 值为数据里data里的href属性

• 绑定class 几种方式

    

        这里是div标签
        点击转到百度上
    
        

className: 'red green'  // 绑定多个className

• []绑定方法

        这里是div标签
        点击转到百度上
    
        

v-bind:class="[redClass , greenClass, pinkClass]" // []绑定多个，绑定数组里的值

• {}绑定方法

        这里是div标签
        点击转到百度上
    
        

{ red: redClass }
属性是css样式的名字red 值是data (类型 true false)
意思是: 是否添加red 这个css的属性名

v-model进行数据双向绑定

v-bind 与 v-model 应用

        
        
        
        
我是用来测试的div
    
        

复选框选中时 是true 没选中时为 false 下面的data的值也会跟着改 对应上面的class也会跟着变

image.png