前端和Vue_IT分享知识网

大家好，欢迎来到IT知识分享网。

前端和Vue

1.前端基本情况介绍
2.Vue基础语法
3.计算属性computed
- 3.1 computed：指一个属性通过其他属性计算而来
4.侦听器watch
- 4.1 watch（侦听器）：监听一个属性改变触发一个事件
5.模板template
- 5.1 template：模板
6.组件component
7.Vue生命周期

1.前端基本情况介绍

1.1 vue 是什么？

Vue.js—— 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持开发复杂单页应用。

渐进式:从核心到完备的全家桶
增量:从少到多,从一页到多页,从简单到复杂
单文件组件: 一个文件描述一个组件
单页应用: 经过打包生成一个单页的html文件和一些js文件

vue对象与HTML关系

1.2 vue优缺点

Vue 不缺入门教程，可是很缺乏高阶教程与文档
Vue不支持IE8
量级问题(angular和react)

1.3 一个vue页面(在html中)以及插值表达式

按照Vue的语法 {
{}}: 插值表达式
插值表达式: 根据表达式的内容找到’对应的Vue对象’ 的参数自定义的地方(一般是data)，里面获取对应参数值, 替换 — 运算 –>

引入vue.js最好放在head部分引入（避免页面抖屏）

执行过程：

创建了一个Vue对象(根据Vue语法)
这个Vue对象一旦创建, 会立即检查它的el属性
他会根据el属性找到一个对应id的html代码
如果找到了, 把找到的html代码所对应的作用域 和这个Vue对象’绑定起来’
这个html代码所对应的作用域就不在仅仅是html代码作用域, 还是这个Vue对象作用域
这个作用域代码会重新, 按照Vue语法再解析一遍
el data: Vue固有属性
例1：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <div id="root"> <!-- 按照Vue的语法 { 
   {}}: 插值表达式 插值表达式: 根据表达式的内容 找到'对应的Vue对象' 的 参数自定义的地方(一般是data) 里面 获取对应参数值, 替换 --- 运算 --> { 
  {msg + aaa}} <div id="div1"> { 
  {msg}} </div> </div> <script> new Vue({ 
     el: "#root", data:{ 
    // 一般用于我们自定义一些属性和参数, 注意: key-value结构 msg: 123, aaa: 1 } }) new Vue({ 
     el: "#app", data:{ 
     msg: 123, aaa: 1 } }) </script> </body> </html>

例2：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <!--vue 1.0 --> <div id="app"> <div id="root"> { 
  {msg + aaa}} <div id="div1"> { 
  {msg}} </div> </div> <div> </div> </div> <script> new Vue({ 
     el: "#app", data: { 
    // 一般用于我们自定义一些属性和参数, 注意: key-value结构 msg: 123, aaa: 1 } }) </script> </body> </html>

例3：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body > <div id="root"> <!-- { 
   {msg }}--> { 
  {obj.name}}{ 
  {obj.age}} </div> <script> new Vue({ 
     el: "#root",// 用id来绑定 data:{ 
    // key=value msg: 123, aaa: 1, str: 'zs', arr: ["zs", "ls", "wu", "zl"], obj: { 
     name: "zs", age: 18 }, bool: true, bool2: false } }) </script> </body> </html>

2.Vue基础语法

简洁,轻量,快速,数据驱动,模块友好,组件化
Vue基础’v-xx:’指令

2.1 V-bind：单向绑定

用来绑定数据和属性以及表达式，缩写为’：’
示例：

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <!--在html中使用v-bind: 给一个html属性绑定一个参数, 这个参数是对应vue对象中自定义的参数--> <div id="root"> { 
  {num}} <!-- 相当于在vue对象中取出num 赋值给value--> <input v-bind:value="num"> <div v-bind:title="msg + num"> 123 </div> <!-- v-bind: 可以简化写法 : --> <div :title="msg + num"> 123 </div> </div> <script> new Vue({ 
     el: "#root", data: { 
     num: 22, msg: "我是一个div" } }) </script> </body> </html>

2.2 V-model：双向数据绑定

只能用于表单元素的value上

一个表单的value属性绑定一个参数, 这个参数是对应vue对象中自定义的参数
如果绑定之后, 表单元素的value发生了改变, 那么, 对应自定义属性也会发生改变
示例

输入框:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="root"> { 
  {num}} 单向绑定：<input v-bind:value="num"> 双向绑定-下拉：<select v-model="num"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> 双向绑定文本框：<textarea v-model="num"></textarea> 双向绑定输入框：<input v-model:value="num"> </div> <script> new Vue({ 
     el: "#root", data: { 
     num: 2 } }) </script> </body> </html>

2.3 V-text：类似更新元素的 innerText

示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="root"> <div v-text="obj.name"> <!-- { 
   {obj.name}}--> </div> <div v-text="obj.age"> <!-- { 
   {obj.age}}--> </div> <div v-html="obj.name"> <!-- { 
   {obj.name}}--> </div> <div v-html="obj.age"> <!-- { 
   {obj.age}}--> </div> </div> <script> new Vue({ 
     el: "#root", data: { 
     obj:{ 
     name: "<b>zs</b>", age: 18 } } }) </script> </body> </html>

2.4 V-html：更新元素的 innerHTML

示例

同2.3

2.5 V-show：标签控制隐藏, (display设置none)

示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="root"> <div v-show="bool"> <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=,&fm=26&gp=0.jpg"> </div> <button @click="changeimg"> 改变</button> </div> <script> new Vue({ 
     el: "#root", data: { 
     bool: true }, methods: { 
     changeimg: function () { 
     //! this.bool取反 this.bool = ! this.bool } } }) </script> </body> </html>

2.6 V-if； V-else；V-else-if：根据表达式的值的真假条件渲染元素

示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="root"> <div v-if="bool1"> v-if </div> <div v-else-if="bool2"> v-else-if </div> <div v-else> v-else </div> </div> <script> new Vue({ 
     el: "#root", data: { 
     bool1: false, bool2: true } }) </script> </body> </html>

2.7 V-if和v-show区别

v-show不同于v-if
如果v-if=false 页面是把v-if所在标签整个标签取消在dom中
而v-show=false则是把这个标签隐藏，但是这个标签还存在与dom树上

2.8 V-for：基于源数据多次渲染元素或模板块(循环渲染元素)

注意1:

v-for: 写在那个标签上, 循环遍历的就是那个标签

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="root"> <div v-for="item of arr"> { 
  {item}} </div> </div> <script> new Vue({ 
     el: "#root", data: { 
     arr: ["zs", "ls", "wu", "zl"] } }) </script> </body> </html>

注意2:

对于v-for遍历 in/of 都可以, 没有什么区别

注意3:

在vue中如果使用v-for这个指令, 那么必须给每一个v-for指令所遍历出的元素/标签, 加一个:key=”唯一值” key不可重复
Key是一个底层标记(给底层代码用的): 不是给我们(程序员)用的
方式一：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="root"> <div v-for="item of arr" :key="item.id"> { 
  {item.name}} </div> </div> <script> new Vue({ 
     el: "#root", data: { 
     arr: [{ 
     id: 1, name: "zs", age: 18 }, { 
     id: 2, name: "ls", age: 18 }, { 
     id: 3, name: "wu", age: 18 }, { 
     id: 4, name: "zl", age: 18 }] } }) </script> </body> </html>

方式二：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="root"> <!-- item: 遍历出来的单个元素, index: 下标--> <!-- <div v-for="(item, index) of arr" :key="index">--> <!-- { 
   {item}}&#45;&#45;{ 
   {index}}--> <!-- </div>--> <div v-for="(aaaa, xxx) of arr" :key="xxx"> { 
  {aaaa}}--{ 
  {xxx}} </div> </div> <script> new Vue({ 
     el: "#root", data: { 
     arr: ["zs", "ls", "wu", "zl"] } }) </script> </body> </html>

方式三：（向列表中添加元素，点击某个元素，就删除某个元素）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="root"> <div v-for="(aaaa, xxx) of arr" :key="xxx" @click="deletediv(xxx)"> { 
  {aaaa}}--{ 
  {xxx}} </div> <input v-model="inputstr"> <button @click="add">添加</button> </div> <script> new Vue({ 
     el: "#root", data: { 
     inputstr: '', arr: ["zs", "ls", "wu", "zl"] }, methods: { 
     add: function () { 
     this.arr.push(this.inputstr) }, deletediv: function (index) { 
     //index是删除的起始位置，1是从index起始位置要删除的元素个数 this.arr.splice(index, 1) } } }) </script> </body> </html>

示例1(添加列表元素)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="root"> <ul> <!--item123是数组list中的变量，用于v-for循环--> <li v-for="item123 in list" >{ 
  {item123}}</li> </ul> <input v-model="inputstr"> <button v-on:click="add">点击添加</button> </div> <script> new Vue({ 
     el: "#root", data: { 
     inputstr: '', list: ['zs', 'ls', 'wu'] }, methods: { 
     add: function () { 
     console.log(this.inputstr) //将新输入的元素值加入列表 this.list.push(this.inputstr) //将输入框中的元素值清除 this.inputstr = '' } } }) </script> </body> </html>

示例二：

2.9 V-on：绑定事件监听器。可简写@

v-on用来监听一个事件, 监听到的时间要触发到vue对象中去: methods里面

示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="root"> <div v-show="bool"> <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=,&fm=26&gp=0.jpg"> </div> <!-- <button οnclick="f()"> 改变</button>--> <!--v-on用来监听一个事件, 监听到的时间要触发到vue对象中去: methods里面--> <button v-on:click="f"> 改变</button> <!--<button @click="f"> 改变</button>--> <!-- v-on: 可以简写为@ --> </div> <script> new Vue({ 
     el: "#root", data: { 
     bool: false }, methods: { 
     f: function () { 
     // 一定要加this this.bool = !this.bool } } }) function f() { 
     alert('?') } </script> </body> </html>

2.10 V-pre：可以用来阻止预编译，其内部的内容不会被编译，会原样输出

示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="root"> <div v-pre> { 
  {msg}} </div> </div> <script> new Vue({ 
     el: "#root", data: { 
     msg: "zs" } }) </script> </body> </html>

2.11 V-cloak：延迟显示

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的标签直到实例准备完毕。

示例1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> <style> / 属性选择器 */ [v-cloak]{ 
     /*display: none;*/ font-size: 100px; } </style> </head> <body> <div id="root"> <div v-cloak> { 
  {msg}} </div> </div> <script> // 3秒之后执行某一个方法: f setTimeout('f()', 3000) function f() { 
     new Vue({ 
     el: "#root", data: { 
     msg: "zs" } }) } </script> </body> </html>

3秒后：

2.12 V-once：只渲染元素和组件一次

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="root"> <div v-once> { 
  {msg}} </div> { 
  {msg}} <input v-model="msg"> </div> <script> new Vue({ 
     el: "#root", data: { 
     msg: "zs" } }) </script> </body> </html>

3.计算属性computed

3.1 computed：指一个属性通过其他属性计算而来

示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="root"> <!-- 插值表达式: 找自定义属性 : 先找data: 如果找不到计算属性--> { 
  {sum}} <br> <input v-model="num1" ><br> <input v-model="num2" > <hr> { 
  {sum2}} <button>求和</button> </div> <script> new Vue({ 
     el: "#root", data: { 
     num1: 0, num2: 0 // sum: 0 }, computed: { 
     // 不是方法, 外在表现是一个属性 sum: function () { 
     // 计算属性, 是通过别的属性计算而来, 他是依赖于别的属性的 return parseInt(this.num1) + parseInt(this.num2) }, sum2: function () { 
     return parseInt(this.num1) + parseInt(this.num2) + this.sum } } }) </script> </body> </html>

4.侦听器watch

4.1 watch（侦听器）：监听一个属性改变触发一个事件

示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="root"> { 
  {sum}}<br> <input v-model="num1"> <input v-model="num2"> </div> <script> new Vue({ 
     el: "#root", data: { 
     sum: 0, num1: 0, num2: 0 }, watch: { 
    // 侦听器: 侦听一个属性的改变, 然后触发一个方法 // 方法名, 就是要侦听的属性 num1: function () { 
     this.sum = parseInt(this.num1) + parseInt(this.num2) }, num2: function () { 
     this.sum = parseInt(this.num1) + parseInt(this.num2) } } }) </script> </body> </html>

5.模板template

5.1 template：模板

一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略

示例1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="root"> { 
  {msg}} </div> <script> new Vue({ 
     el: "#root", data: { 
     msg: "1123" }, template:"<div>div</div>" }) </script> </body> </html>

注释： template:”<.div>div<./div>“时结果

执行： template:”<.div>div<./div>”时结果

示例2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="root"></div> <script> // 以后html写代码, html只需要提供一个入口, // html js 都可以在一个vue对象中实现 new Vue({ 
     el: "#root", data: { 
     msg: "1123" }, template:"<div><div @click='clickdiv'>{ 
    {msg}}</div>" + "<p @click='clickp'>{ 
    {msg}}</p></div>", methods: { 
     clickdiv: function () { 
     this.msg = "div" }, clickp: function () { 
     this.msg = "p" } } }) </script> </body> </html>

点击上面：

点击下面：

6.组件component

示例1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="root"> <x></x> <y></y> <z></z> </div> <script> var son1 = { 
     template:"<div>son1</div>" } var son2 = { 
     template:"<div>son2</div>" } var son3 = { 
     template:"<div>son3</div>" } new Vue({ 
     el: "#root", data: { 
    }, components:{ 
     x:son1, y:son2, z:son3, } }) </script> </body> </html>

示例2：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="root"> </div> <script> var son1 = { 
     template:"<div>son1</div>" } var son2 = { 
     template:"<div>son2</div>" } var son3 = { 
     template:"<div>son3</div>" } new Vue({ 
     el: "#root", data: { 
    }, components:{ 
     x:son1, y:son2, z:son3, }, template:"<div><x></x><y></y><z></z></div>" }) </script> </body> </html>

示例3：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="root"> </div> <script> var son1 = { 
     template:"<div><div @click='f'>son1</div></div>",//@click='f'指此内部的方法 methods: { 
     f: function () { 
     alert(123) } } } var son2 = { 
     template:"<div>son2</div>" } var son3 = { 
     template:"<div>son3</div>" } new Vue({ 
     el: "#root", data: { 
    }, components:{ 
     x:son1, y:son2, z:son3, }, template:"<div><x></x><y></y><z></z></div>", }) </script> </body> </html>

7.Vue生命周期

什么是生命周期：
从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
生命周期函数：

beforeCreate
Created
beforeMount
Mounted
beforeUpdtae
Updated
beforeDestroy
destoryed

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="root"> { 
  {msg}} <input v-model="msg"> </div> <script> var root = new Vue({ 
     el:"#root", data: { 
     msg: 123 }, beforeCreate:function () { 
     console.log("控制台打印:beforeCreate") }, created:function () { 
     // 写一些向后端请求数据的代码 console.log("控制台打印:created") }, beforeMount:function () { 
     //页面还未被渲染 console.log(this.$el), console.log("控制台打印:beforeMount") }, mounted:function () { 
     //页面渲染完成 // console.log(this.$el), console.log("控制台打印：mounted") }, beforeUpdate:function () { 
     console.log("控制台打印：beforeUpdate") }, updated:function () { 
     console.log("控制台打印：updated") }, beforeDestroy:function () { 
     console.log("控制台打印：beforeDestory") }, destroyed:function () { 
     console.log("控制台打印：destroyed") } }) </script> </body> </html>

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/152063.html

前端和Vue

前端和Vue

1.前端基本情况介绍

1.1 vue 是什么？

1.2 vue优缺点

1.3 一个vue页面(在html中)以及插值表达式

2.Vue基础语法

2.1 V-bind：单向绑定

2.2 V-model：双向数据绑定

2.3 V-text：类似更新元素的 innerText

2.4 V-html：更新元素的 innerHTML

2.5 V-show：标签控制隐藏, (display设置none)

2.6 V-if； V-else；V-else-if：根据表达式的值的真假条件渲染元素

2.7 V-if和v-show区别

2.8 V-for：基于源数据多次渲染元素或模板块(循环渲染元素)

注意1:

注意2:

注意3:

2.9 V-on：绑定事件监听器。可简写@

2.10 V-pre：可以用来阻止预编译，其内部的内容不会被编译，会原样输出

2.11 V-cloak：延迟显示

2.12 V-once：只渲染元素和组件一次

3.计算属性computed

3.1 computed：指一个属性通过其他属性计算而来

4.侦听器watch

4.1 watch（侦听器）：监听一个属性改变触发一个事件

5.模板template

5.1 template：模板

6.组件component

7.Vue生命周期

相关推荐

发表回复

分享到：