vue基础

模板语法

jsx: javascript + xml

​ 可以让我们在dom结构中输写javascript

1.插值

• 文本 ：{ { } }

  ​ {{ msg }}是 {{ ${ this.msg } }} 简写

  ​ this.$data.msg ->this.msg -> msg

• 纯HTML

  v-html
  作用：防止XSS,CSRF 。

• 表达式

2.指令

​ 指令： ( 是绑定在dom属性上 )

v-html: 可以解析标签型数据( 可以将一个数据展示在一个dom的内容中（ 相当于使用了 innerHTML ）)
v-text：可以将一个数据展示在一个dom的内容中（ 相当于使用了 innerHTML ）

class

​ vue中如何给dom添加类名

​ 1. 直接在dom上绑定类名

​ 2. vue中类名绑定 - 对象形式
​ 格式： v-bind:class = “{ 属性： boolean }”
v-bind:class = “{ [data]： boolean }”

​ 3. vue中类名绑定的形式 - 数组的形式

​ 格式： v-bind:class = “[ 数据 ]”

​ 4. 类名绑定不会覆盖原先的类名

​ 5. 为什么要绑定类名

​ 指令是用来操作dom

​ 目的： 为了将来通过数据来操作类名，类名操作dom

style

​ 样式的绑定：

​ v-bind: style = “”

​ 1. 对象的形式

​ 2. 数组的形式

条件渲染

• v-if

​ 可以控制一个dom的存在与否（ 创建 和 销毁 ）

• v-else

• v-else-if

• template v-if ,包装元素template 不会被创建

• v-show

  ​ 可以控制一个dom的显示隐藏（ 这个指令操作的是dom的display属性 ）

  列表渲染

• v-for (特殊 v-for=“n in 10”)

  形式：
  1. 数组 v-for = " (item,index) in arr " item是arr中每一个元素
  2. 对象 v-for = "(item,key,index) in obj " item是obj的属性值
  3. json类型数据
  4. 嵌套类型数据

  方法：
  1. in
  2. of

• key

  • 理想的 key 值是每项都有的且唯一的 id

  • 跟踪每个节点的身份，从而重用和重新排序现有元素

  • 使用指令 v-bind 来绑定 key v-bind:key = " " 可以简写成： :key = " "

  • 如果有id，那么我们就使用id，如果没有，我们才会选择index

  • v-bind: 单项数据绑定： 将一个数据绑定在一个dom的属性上

• 数组更新检测

  • 使用以下方法操作数组，可以检测变动

    ​ push() pop() shift() unshift() splice() sort() reverse()

  • filter(), concat() 和 slice() ,map(),新数组替换旧数组

  • 不能检测以下变动的数组
    vm.items[indexOfItem] = newValue

    解决方法：

    1. Vue.set(example1.items, indexOfItem, newValue) / this.$set
    2. splice

• 应用：显示过滤效果

事件处理

1. 监听事件-直接触发代码
2. 方法事件处理器-写函数名
3. 内联处理器方法-执行函数表达式
4. 事件修饰符 https://cn.vuejs.org/v2/guide/events.html
5. 按键修饰符

v-on使用：

• 事件源
• 事件绑定形式
• 事件类型
• 事件处理程序

  var vm = new Vue({
    el: '#app',
    methods: {
      // 存放事件处理程序
      helloHandler (e) {//在事件处理程序中， 写e就可以了
        console.log(e);
      }
    }
  })

v-on:eventType = " handlerName "

简写 v-on: — > @

v-model

​ 双向数据绑定

​ 默认绑定value值

​ v-model应用于表单元素