Vue 基础（二）

最新推荐文章于 2023-07-19 17:30:30 发布

lww_gfly

最新推荐文章于 2023-07-19 17:30:30 发布

阅读量348

点赞数

分类专栏：关于Vue 文章标签： vue 前端列表渲染 v-if与v-show的区别

本文链接：https://blog.csdn.net/A_head_of_cookies/article/details/93204462

版权

关于Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一.Vue基础

1.模板语法

插值
a.文本{{ }} （mutache 语法糖，后面会详细讲解mutache）
b.纯HTML
c.表达式
指令：是带有v-前缀的特殊属性

v-bind
v-if v-show
v-on:click
v-for
3.事件绑定
v-bind:src=>:src
v-on:click=>@click

mutache

mustache语法糖对数据类型的支持（ js语法的支持）
数据类型：
第一种划分：
基础数据类型： number string boolean
复杂数据类型: Object( array function )
特殊数据类型: null undefined
第二种划分：
初始数据类型: number string boolean null undefined
引用数据类型: object( array function )
结论： mustache支持我们js的数据类型的
conosle.log 和 alert 在我们mustache语法中是不支持的

mustache 绑定 dom的属性案例： v-html 分析：发现dom元素直接有了一个内容这种属性绑定就是为了操作dom 结论：
这种属性绑定的形式就是为了操作dom，我们给这种属性起了一个好听的名字 Vue 1.0 叫它属性指令（借鉴Angular来的） Vue
2.0 统称为 ‘指令’ 指令是用一个 v-xxx 表示指令是用来操作dom Vue中不允许直接操作dom mustache语法 — 属性写法的属性值是直接写数据的，不需要使用 {{ }} 指令： ( 是绑定在dom属性上 ) v-html: 可以解析标签型数据(
可以将一个数据展示在一个dom的内容中（相当于使用了 innerHTML ）) v-text：可以将一个数据展示在一个dom的内容中（
相当于使用了 innerHTML ）条件渲染的指令

2.class与style

绑定html class

对象语法
数组语法

绑定内联样式

对象语法
数组语法

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 }”
3. vue中类名绑定的形式 - 数组的形式【推荐】
格式： v-bind:class = “[ 数据 ]”
4. 类名绑定不会覆盖原先的类名
5. 为什么要绑定类名
指令是用来操作dom
目的：为了将来通过数据来操作类名，类名操作dom

参考下面这个栗子：

html代码：
<div id="app">
    <h3> v-class </h3>
    <hr>
    <h3> vue中类名添加第一种 </h3>
    <p class="size bg_color"></p>
    <hr>
    <h3> vue中类名添加第二种 - 对象的形式</h3>
    <p :class = "{ size: true,bg_color: false }"></p>
    <p :class = "{ size: true, bg_color: true }"></p>
    <p :class = "{ [s]: true, [bg_color]: true }"></p>
    <p :class = "{ [s]: 5>3?true: false, [bg_color]: true }"></p>
    <hr>
    <h3> vue中类名添加的第三种形式 - 数组形式（ 推荐 ）</h3>

    <p :class = "['size','bg_color']"></p>

    <p :class = "[ s, bg_color ]"></p>

    <p :class = "[ flag? s:'box', bg_color]"></p>
    <p :class = "[ flag? s:'box', bg_color]"  class = "yyb"></p>

  </div>
  -----------------------------------------------------------------------------------
  script代码：
   new Vue({
    el: '#app',
    data: {
      msg: 'hello Vue.js',
      s: 'size',
      bg_color: 'bg_color',
      flag: true
    }
  })
  var a = {
    name: 'gfly'
  }
  var b = {
    name: 'lww'
  }

3.条件渲染

v-if

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

v-else、 v-else-if
template v-if,包装元素template不会被创建
v-show

参考下面这个栗子：

html代码：
<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>
  script 代码：
  var vm = new Vue({
    el: '#app',//给跟实例一个模板（ 挂载 ）
    data: { 
      showFlag: true,
      ifFlag: false,
      type: 'A'
    }
  })

v-if 与 v-show的区别

v-if 操作的是dom元素（组件）的创建或是销毁
v-show 操作的是dom元素的display属性
v-if可以有多种使用形式：单路分支，多路分支，双路分支
v-show 只能写一个单路形式
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变，则使用 v-if 较好。

4.列表渲染

v-for( 特殊 v-for=‘n in 10’ )
a.in
b.of
key:

跟踪每个节点的身份，从而重用和重新排序现有元素
理想的key值是每项都有的且唯一的id.

数据更新检测
a.使用以下方法操作数组，可以检测变动
push() pop() shift() unshift() splice() sort() reverse()
b.filter(),concat()和slice(),map()新数组替换旧数组
c.不能检测以下变动的数组
vm.items[indexOfltem]=newValue
解决方法：
(1) Vue.set( example1.items,indexOfltem,newValue)
(2) splice
应用：显示过滤效果

v-for

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

html代码：
 <div id="app">
    <h3> 数组 </h3>
    <ul>
      <li v-for = " (item,index) in arr " v-bind:key = "index">
        <p> item :{{ item }} --  index: {{ index }}</p>
      </li>
    </ul>
    <hr>
    <h3> 对象 </h3>
    <ul>
      <li v-for = "(item,key,index) in obj" v-bind:key = "index"> 
        <p> value: {{ item }} -- key: {{ key }} -- {{ index }} </p>
      </li>
    </ul>
    <hr>
    <h3> json </h3>
    <ul>
      <li v-for = "(item,index) of json" v-bind:key = " item.id ">
        <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 " :key = "item.id">
        <p> id: {{ item.id }} </p>
        <ul>
          <li v-for = "todo in item.todos">
            todos中的数据 -- {{ todo }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
  script代码：
  new Vue({
    el: '#app',
    data: {
      arr: [1,2,3,4],
      obj: {
        id: 1,
        name: '皮卡丘',
        sex: 'man',
        age: 18
      },
      json: [
        {
          id: 1,
          task: '放电'
        },
        {
          id: 2, 
          task: '卖萌'
        }
      ],
      lists: [
        {
          id: 1,
          todos: {
            id: 1,
            name: '杰尼龟'
          }
        },
        {
          id: 2,
          todos: {
            id: 2,
            name: '妙蛙种子'
          }
        }
      ]
    }
  })

5.事件处理

监听事件-直接触发代码
方法事件处理器-写函数名
内联处理器方法-执行函数表达式
事件修饰
按键修饰符

提到事件，那么问题来了在javascript中事件添加有几种形式？

事件绑定
dom.onclick = function () {}
dom: 事件源
on: 绑定事件的形式
click: 事件类型
function（）{} 事件处理函数
事件监听： addeventListener
直接在标签中绑定事件

<div onclick = "事件名称"></div>

而vue采用了第三种，也是通过属性的形式绑定在dom身上

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

v-on使用
事件源
事件绑定形式
事件类型
事件处理程序
v-on:eventType = " handlerName "
简写 v-on: — > @

html代码：
<div id="app">
    <button v-on:click = "helloHandler"> 点击 </button>
    <button @click = "helloHandler"> 点击 </button>
  </div>
  
 script代码：
 var vm = new Vue({
    el: '#app',
    methods: {
      // 存放事件处理程序
      helloHandler () {
        alert( 'hello' )
      }
    }
  })
  console.log( 'vm', vm )

那么如果我们通过length = 0,来清空一个数组，那么vue检测不到这个这个变动
解决方法： 1.使用splice
举个栗子：

html代码：
 <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>
script代码：
new Vue({
        el: '#app',
        data: {
            arr: [1, 2, 3],
            lists: [{
                id: 1,
                task: '锻炼1'
            }, {
                id: 2,
                task: '敲代码'
            }]
        },
        methods: {
            add() {
               
                this.lists.push({
                    id: this.lists.length + 1,
                    task: '打篮球'
                })
            },
            remove() {
                this.lists.pop()
            },
            indexHandler() {
               
                this.lists[1] = {
                    id: 2,
                    task: 'gfly'
                }

                // 将整个列表清空
                this.lists.length = 0

                // this.lists.splice( 0 )加上之后才能检测到
            },
            arrChange() {
                this.arr[1] = 'gfly' //不可以检测到的
            }
        }
    })

解决方法：2使用 Vue.set / this.$set
将arrChange中的代码换成下面这行

 this.$set(this.arr, '1', 'gfly')

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

html代码：
<div id="app">
    <input type="text" v-model = "msg">
    <p> {{ msg }} </p>
  </div>
script代码：
new Vue({
    el: '#app',
    data: {
      msg: 'hello Vue.js'
    }
  })