黑客灵魂

这个屌丝很懒，什么也没留下！

热门标签

Vue详解

作者：黑客灵魂 | 2024-08-05 23:41:47

踩

Vue详解

Vue2官网：https://v2.cn.vuejs.org/v2/guide/

初识Vue

Vue2 是一个相当经典的版本，4 年间一共经历了 70 多次的版本更新，实际开发中 Vue2 依然用的很多。从 Vue2 这个经典版本入门，等熟练掌握之后，再去学习 Vue3 .

Vue 官网定义：

                                        Vue 是一套用于构建用户界面的渐进式 JavaScript 框架

构建用户界面：将数据通过某种办法变成用户可以看见的界面（前端开发工程师的职责：在合适的时候发出合适的请求，最后将数据展示到合适的位置）。 Vue 并不关心怎么得到数据（发送请求、模拟数据或者是死数据），Vue 只关心在得到数据之后如何将它变成界面
渐进式：所谓的渐进式是指 Vue 可以自底向上逐层应用。如果应用比较简单，那么只需要一个轻量小巧的核心库（压缩完之后只有 100kb 左右), 如果是一个比较复杂的应用，则可以引入各式各样的 Vue 插件。

谁开发的？---- 尤雨溪（Evan You)

Vue的特点

  （1）采用组件化模式，提高代码复用率、且让代码更好维护。

                在 Vue 中，一个 .vue 文件就是一个组件。

Vue包含了 html 结构、css 样式以及 js 交互。

                提高代码的复用率：只需要引入 .vue 文件，就能够实现和原先相同的功能

                代码更好维护：组件化的设计使得对某一组件的修改不会影响到其他组件

                                          的正常运行（封装）
（2）声明式编码，让编码人员无需直接操作 DOM ，提高开发效率
命令式编码：按照指定的步骤执行，缺一不可

（3）使用虚拟 DOM +优秀的 Diff 算法，尽量复用 DOM 节点
虚拟 DOM 就是内存中的数据
对于新增的数据，Vue 会将新的虚拟 DOM 和旧的虚拟 DOM 进行比较

        （ Diff 算法），将相同的部分直接进行复用

模板语法

Vue模板语法包括两大类：

1、插值语法

功能:用于解析标签体内容
写法: {{xxx}}，xxx 是js 表达式，可以直接读取到 data 中的所有区域

2、指令语法

功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.)
举例:<a v-bind:href="xxx">或简写为<a :href="xxx">，xxx 同样要写js 表达式，可以直接读取到 data 中的所有属性
备注:Vue 中有很多的指令，且形式都是v-xxx，此处只是拿 v-bind 举例

示例


<template>
    <div class="twoPage">
      <!-- 模板语法：-->
 
      <h1>第二章 模板语法</h1>
      <hr>
      <h2> 插值语法</h2>
      <p>你好，{{ name }}</p>
      <hr>
      <h2>指令语法</h2>
      <!-- 错误示例：<a :href={{}}>点我去看-{{test.name}}1</a><br> -->
      <a href="https://www.baidu.com">点我去看-{{test.name}}1</a><br>
 
      <!-- 不加v-bind: hrel引号里面就是字符串，加v-bind: hrel引号里面就是js表达式 -->
      <a href="test.url">点我去看-{{test.name}}2</a><br>
      <a v-bind:href="test.url">点我去看-{{test.name}}3</a><br>
 
 
      <a :href="test.url">点我去看-{{test.name}}4</a><br>
      <!-- <a :href="test.url" :x="hello">点我去看-{{test.name}}4</a><br> -->
 
    </div>
  
  </template>
  <script>
  export default {
    name: 'twoPage',
    data () {
      return {
        name: '李四',
          test: {
          url: 'https://www.baidu.com',
          name: '百度'
        },
      
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
  </script>
  <style scoped>
  .twoPage {
    color: red;
  
  }
  </style>

数据绑定

Vue中有2种数据绑定的方式

v-bind

单向绑定v-bind：数据只能从 data 流向页面

v-model

双向绑定v-model:数据不仅能从 data 流向页面，还可以从页面流向 data

备注：
1、双向绑定一般都应用在表单类元素上，如<input><select><textarea>等
2、v-model:value可以简写为v-model因为 v-model 默认收集的就是 value值

示例


<template>
    <div class="threePage">
        <!-- 数据绑定：-->
 
        <h1>第三章 数据绑定</h1>
        <hr>
        <!-- 单向数据绑定 -->
        姓名：<input type="text" v-bind:value="name"><br><br>
        姓名： <input type="text" :value="name"><br><br>
        <!-- 双向数据绑定 -->
        姓名： <input type="text" v-model="name"><br><br>
        姓名：<input type="text" v-model="name"><br><br>
 
    </div>
</template>
<script>
export default {
    name: 'threePage',
    created() {
        console.log('onePage created')
    },
    data() {
        return {
            name: '李四',
 
        }
    }
}
</script>
<style scoped>
.twoPage {
    color: red;
 
}
</style>

MVVM模型

例图：

M：模型Model ，data中的数据
V：视图View，模板代码
VM：视图模型ViewModel，Vue实例

注意：

data中所有的属性，都会出现在vm身上
vm身上的所有属性及Vue原型身上所有的属性，在Vue模板中都可以直接使用

数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
1、Vue中的数据代理通过 vm 对象来代理 data 对象中属性的操作(读/写)
2、Vue中数据代理的好处: 更加方便的操作 data中的数据Vue

基本原理：

1.通过object.defineProperty()把data对象中所有属性添加到 vm上
2.为每一个添加到 vm 上的属性，都指定一个getter setter
3、在getter setter 内部去操作(读/写)data 中对应的属性

Vue 将 data 中的数据拷贝了一份到_data属性中，又将_data 里面的属性提到 vue实例中(如name)。通过defineProperty 实现数据代理，这样通过geter/setter 操作 name，进而操作_data中的 name。而_data 又对 data 进行数据劫持，实现响应式

通俗易懂版本：

数据代理在 Vue.js 中是一个核心概念，它帮助我们理解 Vue 如何处理数据和视图之间的交互。下面我用一个简单的类比来解释数据代理的概念：
        想象一下，你想要买一本书，但是你并不直接去书店购买，而是通过亚马逊这样的在线平台。在这个过程中，亚马逊就像是一个“数据代理”，它代表你与书店进行交易。你告诉亚马逊你想要哪本书，亚马逊从书店获取书，并且最终把书送到你手上。同时，如果书店更新了书的价格或库存，亚马逊也会及时地把这些信息更新给你看。
        在 Vue.js 中，数据代理的工作原理类似。当你创建一个 Vue 实例时，Vue 会自动创建一个代理，这个代理指向 data 对象中的所有属性。这意味着，当你在模板中或者在 Vue 实例的方法中使用 this 来访问或修改数据时，你实际上是在通过这个代理操作 data 对象。
        具体来说，以下是 Vue 中数据代理的几个关键点：
        数据劫持：当 Vue 实例创建时，它会遍历 data 对象的所有属性，并使用 JavaScript 的 Object.defineProperty() 方法来转换这些属性。这使得 Vue 能够追踪到属性的读取和写入。
        代理访问：Vue 会创建一个代理，让你可以通过 this 直接访问 data 对象中的属性，而不需要显式地写成 this.$data.propertyName。例如，你可以直接写 this.propertyName，Vue 会知道你应该是在访问 data 对象中的 propertyName。
        响应式更新：由于数据被劫持，当数据发生变化时，Vue 会自动检测到这个变化，并更新依赖于这个数据的视图部分。这就是为什么在 Vue 中，数据的改变会自动反映到视图上，而不需要手动重新渲染。
        所以，数据代理在 Vue 中的作用就是简化了数据的访问和修改，同时确保了数据的响应式，使得数据和视图能够自动同步。

示例：


<template>
    <div class="fourPage">
      
        <!-- MVVM模型-->
 
        <h1>第四章 MVVM</h1>
        <hr>
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}}</h2>
        <h2>朋友：{{friends}}</h2>
        <h2>朋友1姓名：{{friends[0].name}}</h2>
        <h2>朋友1年龄：{{friends[0].age}}</h2>
        <h2>地址：{{address}}</h2>
        <h2>地址-省：{{address.province}}</h2>
        <h2>地址-市：{{address.city}}</h2>
        <h2>地址-街道：{{address.street}}</h2>
 
       
    </div>
</template>
<script>
export default {
    name: 'fourPage',
    created() {
        // 打印整个 vm 实例
        console.log("vm实例", this)
        // 打印当前组件的 vm 实例中的 data 属性
        console.log("vm实例中的data", this.$data)
 
        console.log("vm实例中的name", this.name)
        console.log("vm实例中的age", this.age)
        console.log("vm实例中的friends", this.friends)
        console.log("vm实例中的friends[0].name", this.friends[0].name)
        console.log("vm实例中的friends[0].age", this.friends[0].age)
 
        console.log("vm实例中的address", this.address)
        console.log("vm实例中的address.province", this.address.province)
    },
    data() {
        return {
            name: '李四',
            age: 18,
            friends: [{
                name: '张三',
                age: 20
            }, {
                name: '王五',
                age: 22
                }],
            address: {
                province: '北京',
                city: '北京',
                street: '天安门'
            }
 
        }
    }
}
</script>
<style scoped>
.twoPage {
    color: red;
 
}
</style>

事件处理

事件的基本用法

1.使用 v-on:xxx或 @xxx 绑定事件，其中 xxx 是事件名
2.事件的回调需要配置在 methods 对象中，最终会在 vm 上
3.methods 中配置的函数，不要用箭头函数，否则this 就不是 vm了3.
4.methods 中配置的函数，都是被 Vue 所管理的函数，this的指向是 vm 或组件实例对象
5.@click="demo"和 @click="demo($event)"效果一致，但后者可以传参

事件修饰符

Vue中的事件修饰符：

1. prevent 阻止默认事件(常用)
2. stop 阻止事件冒泡(常用)
3. once 事件只触发一次(常用)
4. capture 使用事件的捕获模式---不常用自己了解
5. self 只有 event.target 是当前操作的元素时才触发事件---不常用自己了解
6. passive 事件的默认行为立即执行，无需等待事件回调执行完毕---不常用自己了解
修饰符可以连续写，比如可以这么用:@click.prevent.stop="showInfo"

键盘事件

Vue 中常用的按键别名

回车 enter
删除 delete
退出 esc
空格 space
换行 tab 特殊，必须配合 keydown 去使用
上up
下 down
左 left
右right

注意：

Vue 未提供别名的按键，可以使用按键原始的 key值去绑定，但注意要转为 kebab-case(多单词小写短横线写法)

系统修饰键(用法特殊)ctrl alt shift meta(meta 就是 win 键)
配合 keyup 使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
指定 ctr+y使用 @keyup.ctr.y
配合 keydown 使用:正常触发事件

也可以使用 keyCode 去指定具体的按键(不推荐)
Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名

示例


<template>
    <div class="fivePage">
        <h1>第五章 事件处理</h1>
        <hr>
        <h2>事件处理</h2>
        <button v-on:click="showInfo">点我提示信息(不传参)</button><br><br>
        <!-- 简写 -->
        <button @click="showInfo">点我提示信息(不传参)</button><br><br>
        <button @click="showInfo1($event, 66)">点我提示信息1(传参)</button><br><br>
      
        <hr>
        <h2>事件修饰符</h2>
        <!-- 阻止默认事件(常用) -->
        <a href="https://www.baidu.com" @click.prevent="showInfo2">阻止默认事件(prevent)</a><br><br>
 
        <!-- 事件冒泡 --弹出两次-->
        <div @click="showInfo2">
            <button @click="showInfo2">事件冒泡</button>
        </div><br><br>
        <!-- 阻止事件冒泡(stop) -->
        <div @click="showInfo2">
            <button @click.stop="showInfo2">阻止事件冒泡(stop)</button>
        </div><br><br>
        <!-- once  事件只触发一次(常用) -->
        <button @click.once="showInfo2">事件只触发一次(once)</button><br><br>
 
        <!-- 先2再1--先捕获再冒泡 -->
        <div class="box1" @click="showMsg(1)">
            div1 再冒泡
            <div class="box2" @click="showMsg(2)">
                div2 先捕获
            </div>
        </div>
        <!-- 外面的div1也先捕获 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1 使用捕获事件
            <div class="box2" @click="showMsg(2)">
                div2 捕获
            </div>
        </div>
 
        <!-- 只有 event.target 是当前操作的元素时才触发事件 阻止了冒泡 -->
        <div @click.self="showInfo2">
            <button @click="showInfo2">阻止事件冒泡(stop)</button>
        </div><br><br>
 
        <!-- wheel 滚轮事件 -->
        <!-- scroll 滑动条事件 -->
        <ul @scroll="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
 
        </ul>
        <hr>
 
<h2>键盘事件</h2>
<input type="text" placeholder="按下回车提示信息" @keyup.enter="showInfo"><br><br>
<input type="text" placeholder="按下空格提示信息" @keyup.space="showInfo"><br><br>
<input type="text" placeholder="按下tab提示信息" @keydown.tab="showInfo"><br><br>
<input type="text" placeholder="按下ctrl+y提示信息" @keyup.ctrl.y="showInfo"><br><br>
    </div>
</template>
<script>
export default {
    name: 'fivePage',
    created() {
        // 打印整个 vm 实例
        console.log("vm实例", this)
        // 打印当前组件的 vm 实例中的 data 属性
        console.log("vm实例中的data", this.$data)
    },
    data() {
        return {
            name: '李四',
            age: 18,
            address: {
                province: '北京',
                city: '北京',
                street: '天安门'
            }
 
        }
    },
    methods: {
        showInfo(event) {
            alert('你好' + this.name)
            console.log("this", this)
 
            console.log("event", event)
            console.log("event.target.innerText", event.target.innerText)
 
        },
        showInfo1(event, number) {
            console.log("event.target.innerText", event.target.innerText)
            console.log(event, number)
 
            alert('你好' + this.name + number)
 
        },
        showInfo2() {
            alert('打开百度')
 
        },
        showMsg(msg) {
            console.log("msg", msg)
 
        },
        demo() {
            console.log("@")
        }
    }
}
</script>
<style scoped>
.box1 {
    width: 200px;
    height: 200px;
    background-color: rgb(196, 137, 137);
}
 
.box2 {
    width: 100px;
    height: 100px;
    background-color: rgb(177, 177, 231);
}
 
.twoPage {
    color: red;
 
}
 
.list {
    width: 200px;
    height: 200px;
    background-color: rgb(177, 177, 231);
    overflow-y: auto;
}
 
li {
    height: 100px;
}</style>

计算属性computed

1 、定义:

要用的属性不存在，需要通过已有属性计算得来

2、原理:

底层借助了 objcet.defineproperty()方法提供的 getter 和 setter

3 、get 函数什么时候执行?

a.初次读取时会执行一次
b.当依赖的数据发生改变时会被再次调用

4、优势:

与 methods 实现相比，内部有缓存机制(复用)，效率更高，调试方便

5、备注

计算属性最终会出现在 vm 上，直接读取使用即可
如果计算属性要被修改，那必须写 set 函数去响应修改，且 set:中要引起计算时依赖的数据发生改变
如果计算属性确定不考虑修改，可以使用计算属性的简写形式

示例

分别输入姓和名，展示“姓-名”内容，通过四种方法实现


<template>
  <div class="sixPage">
    <h1>计算属性</h1>
    <!-- 方法一:插值语法 -->
    姓:<input type="text" v-model="surname" /><br/><br/>
    名:<input type="text" v-model="name" /><br/><br/>
    姓名:<span>{{ surname +name }}</span><br/><br/>
    姓名:<span>{{ surname }}-{{ name}}</span><br/><br/>
 <!-- 方法二:method实现--数据发生变化,模板会重新解析(注意需要加括号) -->
 <hr>
 全名:<span>{{ fullName() }}</span><br/><br/>
 
<!-- 计算属性 -->
 <hr>
 全名:<span>{{ fullName1 }}</span><br/><br/>
 
 <!-- 监听属性 -->
 <!-- <hr>
 全名:<span>{{ fullName0 }}</span><br/><br/> -->
 
 
</div>
</template>
<script>
export default {
  name: "sixPage",
  data() {
      return {
        surname: "姓",
        name: "名",
        fullName0: "姓-名"
    };
  },
    methods: {
    fullName() {
      return this.surname + this.name;
    }
  },
  computed: {
 
    // 完整写法
    // fullName1: {
    //   get() {
    //     console.log("计算属性被调用了");
    //     return this.surname + this.name;
    //   },
    //   set(value) {
    //     console.log("计算属性被修改了", value);
    //     const arr = value.split("-");
    //     this.surname = arr[0];
    //     this.name = arr[1];
    //   }
    // },
    // 简写形式
    fullName1() {
      console.log("计算属性被调用了");
      return this.surname + this.name;
    }
  },
 
 
  // watch: {
  //   surname(newVal, oldVal) {
  //     console.log("姓被修改了", newVal, oldVal);
  //     this.fullName0 = newVal + this.name;
  //   },
  //   name(newVal, oldVal) {
  //     console.log("名被修改了", newVal, oldVal);
  //     this.fullName0 = this.surname + newVal;
  //   }
  // }
};
</script>
<style lang="scss" scoped></style>

监听属性Watch

注意点

1 当被监视的属性变化时，回调函数自动调用，进行相关操作
2 监视的属性必须存在，才能进行监视，既可以监视 data，也可以监视计算属性
3 配置项属性 immediate:false。改为 true，则初始化时调用一次handler(newValue,oldValue)
4 监视有两种写法
创建 Vue 时传入 watch:{}配置a.
通过 vm.$watch()监视

示例

点击按钮切换天气，分别用不同方法实现，使用Watch来监测天气变化并打印到控制台


<template>
    <div class="sevenPage">
        <h1>监听属性</h1>
        <hr>
        <!-- 方法一: -->
         <h2>今天天气很{{ isHot ? '炎热' : '凉爽' }}</h2>
        <button @click="isHot = !isHot">切换天气</button> 
 
        <!-- 方法二 -->
        <h2>今天天气很{{ info }}</h2>
        <button @click="changeWeather">切换天气</button>
 
 
        <!-- 侦听属性--watch监视属性 -->
       
 
    </div>
</template>
<script>
export default {
    name: "sevenPage",
    data() {
        return {
            isHot: true,
        };
    },
    // 方法二
    computed: {
        info() {
            return this.isHot ? '炎热' : '凉爽'
        }
    },
    methods: {
        changeWeather() {
            this.isHot = !this.isHot
        }
    },
 
    watch: {
        isHot: {
            immediate: true, //初始化时让handler调用一下
            deep: true, //深度监听
 
            handler(newValue, oldValue) {
                console.log('isHot被修改了', newValue, oldValue)
            }
        },
        info: {
            immediate: true, //初始化时让handler调用一下
            handler(newValue, oldValue) {
                console.log('info被修改了', newValue, oldValue)
            }
        }
    },
}
</script>
<style lang="scss" scoped></style>

条件渲染

v-if

写法：
v-if="表达式"
v-else-if="表达式"
v-else

适用于:

切换频率较低的场景，因为不展示的 DOM 元素直接被移除
注意:

v-if可以和v-else-if V-else一起使用，但要求结构不能被打断

v-show

写法:

v-show="表达式"

适用于:

        切换频率较高的场景

特点:

        不展示的 DOM 元素未被移除，仅仅是使用样式隐藏掉 display:none
备注:

        使用 v-if 的时，元素可能无法获取到，而使用 v-show 一定可以获取到
template标签不影响结构，页面 html中不会有此标签，但只能配合v-if，不能配合 v-show

示例


<template>
    <div>
        <h1>第八章 条件渲染</h1>
        <h2>当前的n值是:{{ n }}</h2>
        <button @click="n++">点击n+1</button>
        <button @click="n--">点击n-1</button>
        <h3 v-if="n === 1">n等于1</h3>
        <h3 v-else-if="n === 2">n等于2</h3>
        <h3 v-else-if="n === 3">n等于3</h3>
        <h3 v-else>n等于其他</h3>
        <hr>
        <h3 v-show="n === 1">n等于1</h3>
        <h3 v-show="n === 2">n等于2</h3>
        <h3 v-show="n === 3">n等于3</h3>
        <h3 v-show="n === 4">n等于4</h3>
        <h2 v-if="a">a为true</h2>
    </div>
</template>
<script>
export default {
  name: "eightPage",
  data() {
      return {
          n: 0,
        a:true,
    };
  },
  methods: {},
  
};
</script>
<style lang="scss" scoped></style>

列表渲染

v-for 指令

用于展示列表数据

语法：

v-for="(item, index) in/of list" :key="index" 这里的Key可以是index也可以是对象的唯一标识

item表示列表的每一项
index表示列表的每一项的索引
list表示要渲染的列表数据

可遍历的数据类型：数组、对象、字符串、数字

v-for可以遍历对象
v-for可以嵌套使用
v-for可以和v-if一起使用，但是要避免同时使用，因为v-for的优先级比v-if的优先级高，会导致v-if失效
v-for可以和v-model一起使用，但是要避免同时使用，因为v-for的优先级比v-model的优先级高，会导致v-model失效
v-for可以和v-bind一起使用，但是要避免同时使用，因为v-for的优先级比v-bind的优先级高，会导致v-bind失效

key的作用与原理

参考：Vue 列表渲染 key的原理和作用_列表渲染 key值在列表上方添加个人信息-CSDN博客

示例


 
<template>
    <div>
        <h1>第九章 列表渲染</h1>
        <hr>
    <h2>v-for 指令(遍历数组)人员列表</h2>
    <ul>
        <li v-for="(item, index) in persons" :key="index">{{ item.name }}-{{item.age}}</li>
    </ul>
    <h2>v-for 指令遍历对象</h2>
    <ul>
        <li v-for="(value, key) in obj" :key="key">{{ key }}:{{ value }}</li>
    </ul>
    <h2>v-for 遍历字符串</h2>
   <ul>
       <li v-for="(item, index) in 'hello'" :key="index">{{ item }}-{{index}}</li>
   </ul>
 
    </div>
 
 
</template>
<script>
export default {
  name: "ninePage",
  data() {
    return {
      list: ["apple", "banana", "orange"],
      obj: {
        name: "张三",
        age: 18,
        gender: "男",
      },
      persons: [
        { id: 1, name: "张三", age: 18 },
        { id: 2, name: "李四", age: 20 },
        { id: 3, name: "王五", age: 22 },
      ],
 
 
    };
  },
  methods: {},
  
};
</script>
<style lang="scss" scoped></style>

收集表单数据

示例


<template>
    <div>
 
        <h1>收集表单数据</h1>
 
        <form @submit.prevent="demo">
            账号：<input type="text" v-model.trim="userInfo.account" />
            <br /><br />
            密码：<input type="password" v-model="userInfo.password" />
            <br /><br />
            年龄：<input type="number" v-model.number="userInfo.age" />
            <br /><br />
            性别：
            <input type="radio" v-model="userInfo.gender" value="male" name="sex" />男
            <input type="radio" v-model="userInfo.gender" value="female" name="sex" />女
            <br /><br />
            爱好：
            <input type="checkbox" v-model="userInfo.hobby" value="study" />篮球
            <input type="checkbox" v-model="userInfo.hobby" value="game" />足球
            <input type="checkbox" v-model="userInfo.hobby" value="eat" />羽毛球
            <br /><br />
            校区：
            <select v-model="userInfo.city">
                <option value="">请选择</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="guangzhou">广州</option>
            </select>
            <br /><br />
 
            介绍：
            <textarea v-model.lazy="userInfo.other"></textarea>
            <br /><br />
            <input type="checkbox" v-model="userInfo.agree" />阅读并接受
            <br /><br />
            <a href="http://www.baidu.com">《用户协议》</a>
            <button type="submit">提交</button>
        </form>
    </div>
</template>
<script>
export default {
    name: "namePage",
    data() {
        return {
            userInfo: {
                account: "",
                password: "",
                age: 0,
                gender: "",
                hobby: [],
                city: "beijing",
                other: "",
                agree: false,
                sex: "female"
 
            }
        }
    },
    methods: {
        demo() {
            console.log(JSON.stringify(this.userInfo))
    }},
 
};
</script>
<style lang="scss" scoped></style>

内置指令

1.v-bind 单向绑定

2.v-model 双向绑定

3.v-if 条件渲染，动态控制节点是否存在
4.v-else-if 条件渲染，动态控制节点是否存在
5.v-else 条件渲染，动态控制节点是否存在
6.v-for 遍历数组
7.v-on 绑定事件监听，简写为@
8.v-show 条件渲染，动态控制节点是否展示
9.v-text 向其所在节点渲染文本内容
10.v-html 渲染包含Html结构的内容
11.v-cloak 解决网速慢页面展示出问题--自己了解
12.v-once 初次渲染变为静态内容
13.v-pre 跳过当前元素和子元素的编译过程，加快编译--不常用

v-text

v-html

作用:向指定节点中渲染包含 html 结构的内容
与插值语法的区别:
i.v-htm1 会替换掉节点中所有的内容，{{xxx}}则不会
ii.v-html可以识别 html 结构

严重注意 v-html 有安全性问题!!!
i，在网站上动态渲染任意 htm1 是非常危险的，容易导致 Xss 攻击
ii.一定要在可信的内容上使用 v-htm1，永远不要用在用户提交的内容上!!!

v-once

作用：v-once所在节点在初次动态渲染后,就视为静态内容了
以后数据改变再也不会进行渲染用于性能优化

v-pre

作用： 跳过这个元素和它子元素的编译过程，用于跳过没有指令语法没有插值语法的节点,加快编译

示例


<template>
    <div>
 
    <h2>内置指令</h2>
    
<!-- v-text指令 -->
<div>你好，{{name}}</div>
<div v-text="name"></div>
<div v-text="str"></div>
<hr >
<div>你好，{{name}}</div>
<div v-html="str"></div>
<hr>
<!-- v-once指令 -->
<h2 v-once>初始化n值是{{n}}</h2>
<h2>当前的n值是{{n}}</h2>
<button @click="n++">点我n+1</button>
<hr>
 
<!-- v-pre指令 -->
<h2 v-pre> 正常用于文本这种</h2>
<h2 v-pre>初始化n值是{{n}}</h2>
<h2>当前的n值是{{n}}</h2>
<button @click="n++">点我n+1</button>
 
</div>
 
 
</template>
<script>
export default {
  name: "namePage",
  data() {
      return {
        name: "张三",
          str: "<h1>hello</h1>",
          n: 0
    };
  },
  methods: {},
  
};
</script>
<style lang="scss" scoped></style>

生命周期

a.又名生命周期回调函数、生命周期函数、生命周期钩子
b.是什么: vue 在关键时刻帮我们调用的一些特殊名称的函数
c.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
d.生命周期函数中的 this 指向是 vm 或组件实例对象,及this可以点出data中的所有属性

八个阶段:

创建期间 beforeCreate created
挂载期间 beforeMount mounted
更新期间 beforeUpdate updated
销毁期间 beforeDestroy destroyed

常用的生命周期钩子:

1. mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
2. beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

关于销毁Vue实例
1. 销毁后借助原生的 JS 操作: clearInterval(vm.$timerId)
2. 一般不会在 beforeDestroy 操作数据,因为即便操作了数据,也不会再触发更新流程了

示例

打印查看各个生命周期顺序，定时器的使用。


<template>    
<div>
 
        <h2>生命周期</h2>
        
    </div>
</template>
<script>
export default {
    name: "namePage",
    data() {
        return {
            myTimer: null,
          opacity:1
        };
    },
    beforeCreate() {
        console.log("beforeCreate");
    },
    created() {
        console.log("created");
    },
    beforeMount() {
        console.log("beforeMount");
    },
    beforeUpdate() {
        console.log("beforeUpdate");
    },
    updated() {
        console.log("updated");
    },
    beforeDestroy() {
        clearInterval(this.myTimer);
 
        console.log("beforeDestroy");
    },
    destroyed() {
        console.log("destroyed");
    },
   
    mounted() {
        console.log("mounted");
// 定时器-60毫秒
     this.myTimer=setInterval(() => {
            this.opacity -= 0.01
            if (this.opacity <= 0) this.opacity = 1
        }, 16)
    },
    methods: {},
 
};
</script>
<style lang="scss" scoped></style>

引入外部组件库--例如：ElementUI

        Element UI是一个基于Vue 2的UI组件库，它提供了丰富的组件和功能，帮助开发者快速构建具有统一风格的用户界面。
        当你在Vue项目中引入Element UI时，你实际上是在添加一个外部依赖到你的项目中。这个依赖包含了Element UI的所有组件、样式和相关脚本，它们可以被你的Vue应用所使用。
        在引入Element UI时，你可以选择全局引入整个库，也可以按需引入特定的组件，以优化项目的加载时间和资源消耗。无论是哪种方式，引入Element UI的过程都涉及到在项目中添加相应的依赖，并在代码中导入和注册这些组件，以便在Vue模板中使用它们。
因此，可以说引入Element UI是引入库的一个实例，它扩展了Vue应用的功能，提供了额外的UI组件和交互能力。

1、安装element-ui

打开终端，运行 npm install element-ui --save

2、引入element-ui

打开main.js修改


import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.use(ElementUI)

3、使用element-ui


<pre>
<el-button type="primary">主要按钮</el-button>
<el-button>默认按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</pre>

引入路由

1、安装Vue Router

打开终端，运行：npm install vue-router@3

2、配置

src文件夹中增加router文件夹，并添加index.js文件


 import Vue from 'vue';
   import VueRouter from 'vue-router';
   import Home from '../views/Home.vue'; // 假设Home.vue是你的首页组件
 
   Vue.use(VueRouter);
 
   const routes = [
     {
       path: '/',
       name: 'home',
       component: Home
     },
     // 更多路由...
   ];
 
   const router = new VueRouter({
     mode: 'history', // 使用HTML5 History模式，去掉URL中的#
     base: process.env.BASE_URL,
     routes
   });
 
   export default router;

3、修改main.js


   import router from './router'
            new Vue({
  router,//注册路由
  render: h => h(App),
}).$mount('#app')

4、App.vue中添加router-vue标签

  <router-view></router-view>

5、页面跳转

（1）使用<router-link>组件


  <router-link to="/">首页</router-link>
   <router-link to="/about">关于</router-link>

（2）使用$router.push方法（编程式导航）


 this.$router.push({ name: 'about' });
 this.$router.push({ path: '/about' });

Vue详解

Vue2官网：https://v2.cn.vuejs.org/v2/guide/

初识Vue

Vue 官网定义：

Vue的特点

模板语法

1、插值语法

2、指令语法

示例

数据绑定

v-bind

v-model

示例

MVVM模型

例图：

数据代理

示例：

事件处理

事件的基本用法

事件修饰符

键盘事件

Vue 中常用的按键别名

示例

计算属性computed

1 、定义:

2、 原理:

3 、get 函数什么时候执行?

4、优势:

5、 备注

示例

监听属性Watch

注意点

示例

条件渲染

v-if

v-show

示例

列表渲染

v-for 指令

key的作用与原理

示例

收集表单数据

示例

内置指令

v-text

v-html

v-once

v-pre

示例

生命周期

八个阶段:

常用的生命周期钩子:

示例

引入外部组件库--例如：ElementUI

1、安装element-ui

2、引入element-ui

3、使用element-ui

引入路由

1、安装Vue Router

2、配置

3、修改main.js

4、App.vue中添加router-vue标签

5、页面跳转

（1）使用<router-link>组件

（2）使用$router.push方法（编程式导航）

有不完整的地方，以后会慢慢补充~

2、原理:

5、备注