vue---从0开始，2.vue的简单上手1

1.一些简单的常用指令

v-text -> 给标签绑定数据：

v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。其中：v-text可以简写为{{}},并且支持逻辑运算

<template>
  <div id="app" v-text="title">title </div>
</template>
<script>
export default {
  name: 'app',
  data(){
    return{
      title:"lllll"
    }
  }
}
</script>
<style></style>

或者：

<template>
  <div id="app">  {{ title}} </div>
</template>
<script>
export default {
  name: 'app',
  data(){
    return{
      title:"lllll"
    }
  }
}
</script>
<style></style>

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

<span v-once>这个将不会改变: {{ msg }}</span>

v-text可以简写为{{}},并且支持逻辑运算，模板内的表达式非常便利

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

v-html -> 满足标签格式的字符串会解析成元素节点

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

<template>
  <div id="app" >
    <p  v-html="title"></p>
    <p v-text="hhh"></p>
  </div>
</template>
<script>
export default {
  name: 'app',
  data(){
    return{
      title:"<p style='color:red'>我是红色的</p>",
      hhh:"<p style='color:red'>我是红色的</p>"
    }
  }
}
</script>
<style></style>

输出结果：

v-model -> 一般用于表单元素(input) 双向数据绑定

v-model通常用于表单组件的绑定，例如input，select等。它与v-text的区别在于它实现的表单组件的双向绑定，如果用于表单控件以外标签是没有用的。

<template>
  <div id="app" >
    <p  v-html="title"></p>
    <p v-text="hhh"></p>
    <input type="" name="" v-model="msg">
  </div>
  
</template>
<script>
export default {
  name: 'app',
  data(){
    return{
      title:"<p style='color:red'>我是红色的</p>",
      hhh:"<p style='color:red'>我是红色的</p>",
      msg:"请输入"
    }
  }
}
</script>
<style></style>

v-for -> 循环遍历

<li v-for="(val, key) in list" [:key="key"]>{{ val }}</li>

<template>
  <div id="app" >
      <ol>//<ol> 标签定义有序列表。
    	<li v-for="todo in todos">{{ todo.text }}</li>
  	  </ol>//todo in todos中todo是可以随便定义的，只要后面todo.text相对应
  </div>
</template>
<script>
export default {
  name: 'app',
  data(){
    return{
      todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
      ]
    }
  }
}

</script>
<style></style>

效果：

如果是<li v-for="todo in todos">{{ todo }}</li>则输出效果为：

其中在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，它是当前数组元素的索引,但是后来查阅了文档才知道，在Vue2.0中，v-for迭代语法已经发生了变化：
vue2.0丢弃了: $index 和 $key ：
使用：
(value,key,index) in arr
(value,key) in obj
例：

<template>
  <div id="app" >
    <ul>
      <li v-for="(value,key,index) in options">
        <p class="text-success">{{key}}:{{value}}--{{index}}</p>
      </li>
    </ul>
  </div>  
</template>
<script>
export default {
  name: 'app',
  data(){
    return{
       options: {
          name:"hhh",
          age:"18",
          sex:"girl"
      }
    }
  }
}
</script>

效果：

<template>
  <div id="app" >
    <ul>
      <li v-for="(value,index) in options">
        <p >{{index}}{{value.text}}--{{value.value}}</p>
      </li>
    </ul>
  </div>  
</template>
<script>
export default {
  name: 'app',
  data(){
    return{
      options: [
        { text: '上海市', value: '20' },
        { text: '湖北省', value: '43' },
        { text: '河南省', value: '45' },
        { text: '北京市', value: '10' }
      ]
    }
  }
}
</script>

效果：

v-on -> 事件添加 -> 简写 @

v-on:click=“表达式 | clickFn | clickFn(参数1[, 参数2 …]) ”

<template>
  <div id="app" >
    <div @click="clickFunction">点我弹窗</div>
  </div> 
</template>
<script>
export default {
  name: 'app',
  data(){
    return{   }
  },
  methods:{//方法写在methods里面
    clickFunction: function(){
      alert("我是弹窗")
    }
  }
}
</script>
<style></style>

$event : 事件对象，事件处理函数中第一个参数，或直接使用event
event为触发事件默认：

<template>
  <div id="app" >
    <input type="text"
          v-on:keyup.enter="addThingEnter"//这里没有传参数
          v-model="todo"
    >
    <a href="#" v-on:click="addThingClick">立即添加</a>
  </div>
  
</template>
<script>
export default {
  name: 'app',
  data(){
    return{
      todo:""
    }
  },
  methods:{
    addThingEnter(event){//加上了event参数
      alert(event)
      },
    addThingClick(){
      alert(event)
      }
  }
}
</script>

效果：
点击鼠标弹窗：

输入框按下enter键：

如果函数需要同时传递参数和event事件则使用：

 v-on:click="addThingClick("hhh",$event)"

不能直接写 v-on:click=“addThingClick(“hhh”)”
其函数接收参数时写：

addThingClick(a,event){}

阻止冒泡: ev.stopPropagation() 推荐使用 @click.stop
默认行为: ev.preventDefault() 推荐使用@contextmenu.prevent

v-show -> 元素的显示隐藏，css

<template>
  <div id="app" >
    <div v-show="flag==1">啦啦啦啦</div>
    <div v-show="flag==0">哈哈哈哈</div>
  </div>
</template>
<script>
export default {
  name: 'app',
  data(){
    return{
      flag:0
    }
  }
}
</script>

效果：

v-if -> 元素挂载和移除，DOM操作

<template>
  <div id="app" >
    <div v-if="flag==1">啦啦啦啦</div>
    <div v-if="flag==0">哈哈哈哈</div>
  </div>  
</template>
<script>
export default {
  name: 'app',
  data(){
    return{
      flag:1
    }
  }
}
</script>

效果：

v-if 和 v-show的区别：
简单来说，v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低
共同点
都是动态显示DOM元素

区别
（1）手段：
v-if是动态的向DOM树内添加或者删除DOM元素；
v-show是通过设置DOM元素的display样式属性控制显隐；
（2）编译过程：
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换；
（3）编译条件：
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
（4）性能消耗：
v-if有更高的切换消耗；
v-show有更高的初始渲染消耗；
（5）使用场景：
v-if适合运营条件不大可能改变；
v-show适合频繁切换