2.vue-常用指令

1、v-html：刷新的时候是整个DOM元素都会跟着一起进行刷新
v-text：直接刷新DOM种的text文本内容
2、如果想在vue绑定html中的属性使用的是v-bind进行绑定的
v-bind:html属性=值
3、v-if和v-show的区别：
相同点：true显示false不显示
不同点：
v-if是false的时候直接不加载当前的DOM
v-show是false的时候是加载当前DOM，但是display是none
4、v-bind可以直接使用：进行替代，也是给当前DOM元素绑定上某个属性
5、绑定事件使用的是v-on进行绑定的
v-on：事件名=值
可以使用@进行替代v-on也是绑定事件的
6、事件修饰符：用来阻止默认行为，阻止事件冒泡等的
.prevent:preventDefault()阻止默认行为
.stop:stopPropagation阻止事件冒泡
7、双向数据绑定：
v-model：实现得双向数据绑定：
模型上的数据改变会引起视图上数据的变化，试图改了，模型也会改
实现原理：
：value和v-on的一个结合体，绑定当前元素的value通过v-on进行触发，从而更新数据，再这个过程中使用的是MVVM来实现的
双向数据绑定主要是通过Object.definePrototy()来监听事件，从而改变数据，还会使用的是observer进行数据的劫持，通过get或者是set方法通知订阅
者，触发update方法实现视图的更新
8、原生js：
判断：if
循环：for循环
9、遍历使用的是v-for进行遍历的，和for...in的原理是一样的
遍历数组：第一个参数代表的是数组项，第二个参数代表的是索引值
遍历对象：第一个参数代表的是对象的属性值，第二个参数代表的是对象的属性名，第三个参数代表的是索引值

<template>
  <div id="app">
     {{ bool?'好好学习':'不好好学习'}}
     {{ msg }}
     <p v-html="msg"></p>
     <!-- <p v-text="msg"></p>  （直接刷新DOM种的text文本内容） -->
     <p v-text= "msg" v-bind:class="{'test':bool}"></p>       //v-bind:class="test"
     <a :href="baidu">去百度</a>   <!--  v-bind可以直接使用:进行替代，也是给当前DOM元素绑定上某个属性-->
     <p v-if="bool">21213</p>
      <!-- v-if是false的时候 直接不加载当前的DOM  v-show(加载当前dom，display：none) -->
  
       <p v-on:click.prevent="clickA()">Hello Vuel</p>  
        <!--可以使用@进行替代v on也是绑定事件的-->
        <input type="text" v-model="msg">
 </div>
</template>

<script>
export default {
  name: 'App',
  data () {
          return { 
              msg: '好好学习天天向上' ,
              bool: true,
              //test:'test'
              baidu : 'http://www.baidu.com'
          }
  },
  methods:{
    clickA: function () {
       console.log( '嘻' )
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.test{
  color:skyblue;
}
</style>

<template>
  <div id="app">
    <p v-if="isture">isif</p>
    <p v-else-if="isElseTrue">我是else-if</p>
    <p v-else>我是else</p> 
    <p v-for="(item,index) in items" v-bind:key="index">{{item.name}}</p>
    <p v-for="(item,key,index) in itemss" v-bind:key="index">{{key}}:{{item}}</p>  // key是属性名
 </div>
</template>

<script>
export default {
  name: 'App',
  data () {
          return { 
              msg: '好好学习天天向上' ,
              isture: false,
              isElseTrue:true,
              items:[{name:'liyl'},{name:'asd'},{name:'lasdasd'}],
              itemss:{name:'liyla',age:'asdasd',haha:'lasasddasd'}
          }
  },
  methods:{
    clickA: function () {
       console.log( '嘻' )
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.test{
  color:skyblue;
}
</style>