Vue的语法

最新推荐文章于 2023-10-23 20:58:40 发布

csdnzlcheng

最新推荐文章于 2023-10-23 20:58:40 发布

阅读量110

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/csdnzlcheng/article/details/92845178

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue的语法

mustache语法糖对数据类型的支持（ js语法的支持）
数据类型：

第一种划分：
- 基础数据类型： number string boolean
- 复杂数据类型: Object( array function )
- 特殊数据类型: null undefined
第二种划分：
- 初始数据类型: number string boolean null undefined
- 引用数据类型: object( array function )

结论： mustache支持我们js的数据类型的
conosle.log 和 alert 在我们mustache语法中是不支持的

问题

我们说vue是 MVVM 框架，那么谁是 M 谁是 V 谁是 VM

M： Model 数据
V： View 视图
VM: ViewModel 视图模型（ new Vue() ）

    //<div id="app"></div>    V

    var vm = new Vue({
        el: '#app',//给跟实例一个模板（ 挂载 ）
        data: { //M
        }
    })

简单的数据渲染

单纯数据渲染

     /*<div id="app">
           <p> {{ this.msg }} </p>
           <p> {{ this.$data.msg }} </p>
           <p> {{ this._data.msg }} </p>
           <p> {{ msg }} </p>
       </div>*/      

       var vm = new Vue({
           el: '#app',
           data: {
           msg: 'hello vue.js'
           }
       })

多种数据渲染

    /*<div id="app">
        <p> number: {{ num }} </p>
        <p> string: {{ str }} </p>
        <p> boolean: {{ bool }} </p>
        <p> null: {{ nul?'1':'2' }} </p>
        <p> undefined: {{ und && 1 || 2 }} </p>
        <p> object: {{ obj.name }} </p>
        <p> array: {{ arr[0] }} </p>
        <p> fn: {{ fn() }} </p>
    </div>*/

    var vm = new Vue({
        el: '#app',
        data: {
        num: 100,
        str: 'hello Vue.js',
        bool: true,
        nul: null,
        und: undefined,
        obj: {
            name: 'Gabriel Yan'
        },
        arr: [1,2,3,4],
        fn: function () {
            alert( 2 )
            return '这是一个函数'
        }
        }
    })

mustache 绑定 dom的属性

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

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

条件渲染的指令

v-show : 可以控制一个dom的显示隐藏（这个指令操作的是dom的display属性）
v-if : 可以控制一个dom的存在与否（创建和销毁）
v-else
v-else-if

    /*<div id="app">
        <h3> v-show </h3>
        <p v-show = "showFlag"> v-show指令 </p>
        <hr>
        <h3> v-if - 单路分支 </h3>
        <p v-if = "ifFlag"> v-if - 指令的单路分支 </p>
        <h3> v-if - 双路分支 </h3>
        <p v-if = "ifFlag">  双路分支 成立  </p>
        <p v-else> 双路分支不成立 </p>

        <h3> v-if - 多路分支 </h3>
        <p v-if = " type === 'A'"> A </p>
        <p v-else-if = " type === 'B'"> B </p>
        <p v-else> C </p>
    </div>*/

    var vm = new Vue({
        el: '#app',//给跟实例一个模板（ 挂载 ）
        data: { 
        showFlag: true,
        ifFlag: false,
        type: 'A'
        }
    })

面试题（实用题）【钻石级别】

v-if vs v-show 区别
实用：项目中如何选择这两个使用

v-if 操作的是dom元素（组件）的创建或是销毁
v-show 操作的是dom元素的display属性
v-if可以有多种使用形式：单路分支，多路分支，双路分支
v-show 只能写一个单路形式

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-html

案例： v-html

    /*<div id="app">
        <p v-html = "h"></p>
        <p v-text = "msg"></p>
        <p v-text = " flag && 1 || 2 " > </p>
    </div>*/

     var vm = new Vue({
        el: '#app',
        data: {
        msg: 'hello Vue.js',
        h: '<h3> hello Vue.js </h3>',
        flag: true
        }
    })

分析：

发现dom元素直接有了一个内容,这种属性绑定就是为了操作dom

结论：

这种属性绑定的形式就是为了操作dom，我们给这种属性起了一个好听的名字
- Vue 1.0 叫它属性指令（借鉴Angular来的）
- Vue 2.0 统称为 ‘指令’
- 指令是用一个 v-xxx 表示
- 指令是用来操作dom
- Vue中不允许直接操作dom(待分析)

注意
- mustache语法 — 属性写法的属性值是直接写数据的，不需要使用 {{ }}

v-for

数组 v-for = " (item,index) in arr " item是arr中每一个元素
对象 v-for = "(item,key,index) in obj " item是obj的属性值 key是键
json类型数据
嵌套类型数据

    /*<div id="app">
        <h3> 数组 </h3>
        <ul>
        <li v-for = " (item,index) in arr ">
            <p> item :{{ item }} --  index: {{ index }}</p>
        </li>
        </ul>
        <hr>
        <h3> 对象 </h3>
        <ul>
        <li v-for = "(item,key,index) in obj"> 
            <p> value: {{ item }} -- key: {{ key }} -- {{ index }} </p>
        </li>
        </ul>
        <hr>
        <h3> json </h3>
        <ul>
        <li v-for = "(item,index) of json">
            <p> id: {{ item.id }} </p>
            <p> task: {{ item.task }} </p>
            <p> {{ index }} </p>
        </li>
        </ul>
        <hr>
        <h3> 嵌套 </h3>
        <ul>
        <li v-for = " item in lists ">
            <p> id: {{ item.id }} </p>
            <ul>
            <li v-for = "todo in item.todos">
                todos中的数据 -- {{ todo }}
            </li>
            </ul>
        </li>
        </ul>
    </div>
    */

    new Vue({
    el: '#app',
    data: {
      arr: [1,2,3,4],
      obj: {
        id: 1,
        name: 'zhaoliu',
        sex: 'man',
        age: 18
      },
      json: [
        {
          id: 1,
          task: '敲代码1'
        },
        {
          id: 2, 
          task: '敲代码2'
        }
      ],
      lists: [
        {
          id: 1,
          todos: {
            id: 1,
            name: 'zhansan'
          }
        },
        {
          id: 2,
          todos: {
            id: 2,
            name: 'lisi'
          }
        }
      ]
    }
  })

key : 给没一个循环的列表添加一个唯一的标识

使用指令 v-bind 来绑定 key

<div v-for = " (item,index) in lists" v-bind:key =" item.id "></div>

简写

```
<div v-for = " (item,index) in lists" :key = " item.id "></div>
```

如果有id，那么我们就使用id，如果没有，我们才会选择index
v-bind: 单项数据绑定：将一个数据绑定在一个dom的属性上

vue中如何给dom添加类名

直接在dom上绑定类名
vue中类名绑定 - 对象形式

目的： dom身上属性class 要和数据绑定
解决：v-bind

数据中key，我们起的和绑定的对象中的key一样，但是你得知道这两个东西不一样

<p :class = "{ size,bg_color }"></p>
    size是自定义的属性， 它的属性值是undefined， 相当于是false
<p :class = "{ size: true, bg_color: true }"></p>
    size也是自定义属性，他的属性是true,那么就会加上去
<p :class = "{ [s]: true, [bg_color]: true }"></p>

格式： v-bind:class = “{ 属性： boolean }”
格式： v-bind:class = “{ [data]： boolean }”

vue中类名绑定的形式 - 数组的形式【推荐】

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

类名绑定不会覆盖原先的类名
为什么要绑定类名

指令是用来操作dom
目的：为了将来通过数据来操作类名，类名操作dom

样式的绑定

对象的形式
数组的形式

html代码

<div id="app">
    <h3> style </h3>
    <hr>
    <h3> style - 对象形式 </h3>
    <p :style = "{ width: size.width,height: size.height,background: 'red'}"></p>

    <h3> style - 数组的形式 </h3>

    <p :style = "[ { width: '100px',background: 'blue'},{ height: '100px' } ]"></p>

    <p :style = "[ size,bg ]"></p>
</div>

js代码

new Vue({
    el: '#app',
    data: {
      size: {
        width: '100px',
        height: '100px'
      },
      bg: {
        background: 'purple'
      }
    }
  })

事件

问题： javascript事件添加有几种形式

事件绑定

    dom.onclick = function () {}
    dom: 事件源
    on: 绑定事件的形式
    click: 事件类型
    function（）{} 事件处理函数

事件监听： addeventListener
直接在标签中绑定事件
vue采用了第三种，也是通过属性的形式绑定在dom身上

    <div v-on:click = "事件名称"></div>

简写 v-on: — > @

<div id="app">
    <button v-on:click = "helloHandler"> 点击 </button>
    <button @click = "helloHandler"> 点击 </button>
</div>

var vm = new Vue({
    el: '#app',
    methods: {
      // 存放事件处理程序
      helloHandler () {
        alert( 'hello' )
      }
    }
  })
console.log( 'vm', vm )

事件对象也可以正常使用,在事件处理程序中，写 e 就可以了

问题：如果事件处理程序中有三个参数，第三个参数才是事件对象e,如何实现
分析：我们发现事件处理程序中的第三个参数 e 不在是事件对象了，而是一个undefined
解决：在函数执行时，传入一个实际参数 $event 来代表事件对象

```
<div id="app">
    <!-- <button v-on:click = "helloHandler"> 点击 </button> -->
    <button @click = "helloHandler( 10,20,$event)"> 点击 </button>
</div>

var vm = new Vue({
    el: '#app',
    methods: {
    // 存放事件处理程序
    helloHandler ( a,b,e ) {
        console.log( a )
        console.log( b )
        console.log( e )
    }
    }
})
console.log( 'vm', vm )
```

问题：如果我们通过 length = 0 , 来清空一个数组，那么vue检测不到这个变动

解决方法：使用splice

<div id="app">
    <button @click = "add"> + </button>
    <button @click = "remove"> - </button>
    <button @click = "indexHandler"> 修改第二条数据 </button>
    <ul>
      <li v-for =" item in lists " :key = "item.id">
        {{ item.task }}
      </li>
    </ul>
    <hr>
    <button @click = "arrChange"> 修改第二条数据 </button>
    <ul>
      <li v-for = " (item,index ) in arr " :key = "index">
        {{ item }}
      </li>
    </ul>
</div>

new Vue({
    el: '#app',
    data: {
      arr: [1,2,3],
      lists: [
        {
          id: 1,
          task: '锻炼1'
        },
        {
          id: 2,
          task: '敲代码'
        }
      ]
    },
    methods: {
      add () {
        // console.log( this )
        this.lists.push({
          id: this.lists.length + 1,
          task: '打篮球'
        })
      },
      remove () {
        this.lists.pop()
      },
      indexHandler () {
        //将列表中的第二个数据中的task任务修改为 撸猫
          this.lists[1] = {
            id: 2,
            task: '风哥'
          }
        // 将整个列表清空
          // this.lists.length = 0
          // this.lists.splice( 0 )
      },
      arrChange () {
        // this.arr[ 1 ] = '风哥'  不可以检测到的
        // this.$set( this.arr,'1','风哥' )
        Vue.set( this.arr,'1','风哥')
      }
    }
  })

v-model

双向数据绑定
默认绑定value值
v-model应用于表单元素

<div id="app">
    <input type="text" v-model = "msg">
    <p> {{ msg }} </p>
</div>

new Vue({
    el: '#app',
    data: {
      msg: 'hello Vue.js'
    }
})

csdnzlcheng

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的语法

Vue的语法mustache语法糖对数据类型的支持（ js语法的支持）数据类型：第一种划分：基础数据类型： number string boolean复杂数据类型: Object( array function )特殊数据类型: null undefined第二种划分：初始数据类型: number string boolean null undefined引用数据...
复制链接

扫一扫