一、el挂载点

  • el是用来设置vue实例挂载的元素；
  • vue会管理el选项命中的元素以及其内部的后代元素；
  • 挂载元素时可以是有其他的选择器，但建议使用ID选择器：【el："#app"，】；
  • 挂在元素可以使用其他的双标签，但不能使用html、body标签，建议使用div标签；

二、指令

1、v-text指令：<div v-text = "message+'新建内容！！'"></div>

  • 作用：用于设置标签内容；
  • 会替换标签内容；
  • 支持表达式；

2、v-html指令：<div v-html = "content"></div>

  • 作用：用于设置标签的innerHTML；

3、v-on指令：<input v-on:click = "事件名" /> == <input @click = "事件名">

  • 作用：为元素绑定事件；
  • v-on：click 就类似onclick；
  • v-on：的语法糖是@；
  • 对应事件写在methods中（computed计算属性：一般结合插值表达式：{{fullName}}，不加()是因为它是属性，不是函数，默认自执行内部get函数），通过this使用data中的数据；关于事件名的使用如下：
<div id='app'>
    <button v-on:click='add(message)'>add事件</button>//正常传参
    <button v-on:click='add()'>add事件</button>//加括号不传，形参为undefined
    <button v-on:click='add'>add事件</button>//不加括号，默认传入event对象（用于只需传一个参数，如果函数定义时不需要传参则可以简写如此）
    <button v-on:click='add($event)'>add事件</button>//使用$event,将event对象传入（用于传多个参数且需要传入event对象）
  </div>
  <script src="../vuejs/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'hello',
      },
      methods:{
        add:function(name){
        console.log(name);
      }
      }
    })
  </script>

element Tabs 标签页剧中 vue el标签_vue.js

  • 补充：event是浏览器dom对象；在vue中使用可以用 $event；
  • ：：事件绑定的事件写成函数调用的形式，可以传入参数；
  • ：：如果要传入参数，定义方法时要用形参接收参数；
  • ：：事件后面通过 . 修饰符可以添加限制；如@keyup.enter = "事件名"，可以限制使用enter回车键触发事件；
  • 其中：@click.native="事件名"，触发原生点击，只用于子组件上，是因为组件上默认不能监听原生点击事件，因为要供子组件向父组件传值，所以默认都是让父组件监听用的；而加上.native的修饰符后，父组件就不会监听了，而是把组件当做一般元素执行原生事件；

element Tabs 标签页剧中 vue el标签_vue.js_02

4、v-show指令、v-if指令：<img v-show = "isShow" src=""/>

  • 作用：用于通过真假控制元素显示与隐藏；
  • v-show通过修改元素的样式：display：none；
  • v-if通过修改dom树方式控制；true时从dom树中添加元素，false时从dom树中删除元素；
  • v-show适用于元素频繁的显示与隐藏；v-if适用于元素可能不显示的功能，不显示时首次就不加载；

5、v-bind指令：<img v-bind:src = "imgsrc">，简写'：'

  • 作用：动态设置标签属性值；
  • 动态绑定style： 
<div :style="{color:red,fontSize:16px}"></div>//对象形式
<div :style="isTrue?{color:red,fontSize:16px}:{} "></div>//三元表达式
  • 动态绑定类class： 三元表达式、对象形式；
  1. 为属性动态绑定属性值： 
<img v-bind:src="imgUrl" alt="">
  1. 为元素动态添加、改变一个类：三元表达式；通过事件改变Boolean布尔值'isActive'，来实现自主改变是否添加这个类； 
<img v-bind:class = "isActive ? active : ' ' ">
  1. 为元素动态添加、改变多个类：对象形式：通过事件改变Boolean布尔值'isActive'，来实现自主改变是否添加这些类； 
<img v-bind:class = "{ active:isActive,类名2:boolean,... }">

6、v-for指令：<li v-for = "(item,index) in arr">{{ index }}{{ item }}</li>

  • 根据数据生成列表结构；
  • 经常与数组连用；

7、v-model指令：<input type = "text" v-model = "message" />

  • 等同于：v-bind、v-on结合实现；
  • 绑定的数据与表单元素的值相关联；（双向绑定）
  • v-model的修饰符

element Tabs 标签页剧中 vue el标签_vue.js_03

  • 在下拉框中应用：选一个项（array设置为字符串：用于记录选择了啥）、选多个项（array设置为数组，用于记录选择的都是啥）；
  • 在单选框中的应用：（array手动设置为字符串，用于记录选择的是啥）
<input type="radio" value="男" v-model="array" id="baskctBall">
    <label for="baskctBall">男</label>
    <input type="radio" value="女" v-model="array" id="baskctBall">
    <label for="baskctBall">女</label>

  <script src="../vuejs/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        array:男''
      }
    })
  </script>
  • 在多选框中的应用：一个多选框（array设置为布尔值：用于记录是否选中）、多个多选框（array设置为数组，用于记录选择的都是啥）；
<input type="checkbox" value="随便写" v-model="array" id="agree">
    <label for="agree">同意协议</label>


  <script src="../vuejs/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        array:true
      }
    })
  </script>
<body>
  <div id="app">
    <input type="checkbox" value="篮球" v-model="array" id="baskctBall">
    <label for="baskctBall">篮球</label>
    <input type="checkbox" value="足球" v-model="array">足球
    <input type="checkbox" value="排球" v-model="array">排球
    <input type="checkbox" value="兵乓球" v-model="array">兵乓球
    <p>您的选择是：{{array}}</p>
  </div>
  <script src="../vuejs/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        array:[]
      }
    })
  </script>
</body>