vue课程大全

原创

李才哥

修改于 2021-02-20 18:05:38

1.6K0

修改于 2021-02-20 18:05:38

文章被收录于专栏：李才哥李才哥

亢Vue.js

基础

var vm=new Vue({})

安装

用script引入

介绍

构建用户界面的框架

先script引入

再在js中定义new Vue({})对象

var app=new Vue({el:"#app",data:{msg:"hello vue!"}})

在html中定义容易div#app

V-bind:属性="xx"标签

在标签内定义动态变量

<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span></div>这里意思就是把span添加title="$message"属性,内容是vue内的message的变量值

V-if标签

<p v-if="flag">根据变量是否显示

{{data.text}}传入对象

在data定义对象在HTML中调用

在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。往对象插入新值的方法obj.push({id:999})

处理用户输入v-on事件

v-on:click="ap"//ap是vue内的函数

v-model双向数据绑定

主要用在form元素中v-model:msg

组件化

创建组件

有全局组件和局部组件

· Vue.component('login'.{templage:'登录组件'})

全局组件

Vue.component('todo-item', { // todo-item 组件现在接受一个 // "prop"，类似于一个自定义特性。 // 这个 prop 名为 todo。 props: ['todo'], template: '<li>{{ todo.text }}</li>'})之所以定义props是因为要从vm对象中取值todo对象来使用

· components:{ 'login':{templage:'登录组件'} }

在vm中定义局部组件

html中使用组件

自定义组件取vm对象的值

这里不是太懂

这里记录一下.组件之间可以传值,传递变量:在Vue.component中组件名字定义log增加props定义数组定义一个新变量fusite,然后在log的HTML标签增加<log :fusite='site'>,然后在log的模版中就可以访问{{fusite的变量}},其实就是间接访问父组件的site属性啦.传递方法:在Vue.component中组件名字定义log增加methods方法funcbut(在子组件模版中方便其他应用调用此方法),然后引用funcfuncbut:function(){ this.$emit('func') },引用之后在log标签html中<log @func='details'>就成功引用了,在log的模版中调用方法就直接调用funcbut就可以了,这里有点绕,注意区分funcbut和func和details的方法区别.funcbut是在log中定义的方法,用来引用log标签$emit引用func的.可以在log的模版中调用这个方法func是在loghtml标签用来引用父组件details函数的一个临时名称details是父组件的方法名称.<body> <div id="vue_det"> <h1>site : {{site}}</h1> <input type="text" name="" v-model='site' id=""> <p v-html="url" @func="details">1212</p>  <hr> <log :fusite='site' @func='details'></log>  </div> <template id="tmp1"> <div> <h3>我是一个h3标签,是log组件,想要调用父vue的属性怎么办呢?</h3> <p>首先在log组件填写props属性,然后在loghtml的里面进行传值</p> <p>父组件site值:{{fusite}}</p> <input type="text" name="" v-model='fusite' id=""> <input type="button" id="button" value="弹窗" @click='funcbut'>  </div> </template> <script type="text/javascript"> //定义路由的组件对象 var login = { template: "#tmp1" } Vue.component('log',{ props:['fusite'], template:"#tmp1", methods:{ funcbut:function(){ this.$emit('func') } } }) // //定义注册路由 // var routeobj = new VueRouter({ // routes: [ // //这里是数组匹配路由规则 // { // path: "/login", // component: login // } // ] // }) var vm = new Vue({ el: '#vue_det', data: { site: "daoxiang45645454", url: "<h1>www.runoob.com</h1>", alexa: "10000" }, methods: { details: function () { alert(this.site + " - 学的不仅是技术，更是梦想！"); } }, beforeCreate() { }, //route: routeobj, }) //vm.site="45454545"; console.log(vm); </script>

· 先在自定义组件中添加props属性

props:[todo]//这里的todo(子组件引用的新变量)对应标签上的v-bind:名=父组件变量名

Vue实例

var vm=new Vue({})

当一个vue实例被创建时候,它将data对象中的所有的属性都加入到vue的响应式系统中.当这些属性的值发生改变时,视图将会产生响应,即匹配更新为新的值.vue的设计就相当于替代jquery.让程序员只关心数据,不再关心过程是怎样操作dom的

模板语法

插值表达式

{{msg}}输入纯str

v-html可以解析原始html

<p v-html='rawhtml'>填入变量包含html

使用javascript表达式

{{3+3}}输出6或v-bind:id="'list'+id"这里id是变量

v-if之类的指令

<p v-if="flag">为true可见</p>

事件修饰符

<a @click.prevent='sb'>//sb是函数

缩写

v-on是@----v-bind是:

计算属性和侦听器

计算属性

和methods同级的computed对象属性

var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }})这里当firstname更新的时候,fullname也会被重新计算复制.

· 计算属性computed里面的元素有get和set属性

当get或set值时触发的操作

computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } }}

侦听器

和methods同级的watch对象属性

var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } }})用watch侦听firstName属性,当发生改变就更新fullname的值

Class和Style绑定

用v-bind:class/style来进行操作

绑定class

· 对象语法

{active:isActive}//isActive是变量判断是否添加active

· 数组语法

[activeClass, errorClass]//两个变量对应class名

· 用在组件上

<login>上的class将添加在组件模版的div上

绑定内联样式

· 对象语法

{ color: activeColor}

· 数组语法

[baseStyles, overridingStyles]//保存两个对象

条件渲染v-if语句

判断变量是否显示

<h1 v-if="flag">Vue!</h1>

判断变量决定是否显示

<div v-else-if="type === 'B'">

v-else-if语句

<h1 v-else>没有结果</h1>

上面语句会切换.可用key关键字

Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可：<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"></template><template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"></template>

简单的判断显示可用v-show

<h1 v-show="ok">Hello!</h1>

v-if和v-show对比

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

v-for和v-if一起使用

不推荐.v-for比v-if优先级更高

列表渲染v-for语句

data内有对象items=[{11}{22}{33}]

v-for循环多数据

v-for带索引的循环(带括号第二参数是索引)

<li v-for=(item.index) in items>{{item.id}}--{{index}}</li>

上面循环数组第二参数是索引

下面循环对象第二参数是key.第三参数是索引.第一参数默认是value

v-for循环对象

obj={id:1.name:daoxiang}

注意当时对象的时候如果不是二位对象,后面就没有item.id什么了.因为直接循环出来了.

· <li v-for="item in obj">{{item}}

只有一个item直接就是每项value值

· <li v-for="(item.key) in obj">{{item}}

第一个item是每项value值.key对应属性名

· <li v-for="(item.key.index) in obj">{{item}}

第一个item是每项value值.key对应属性名index是索引

v-for更新操作需要跟踪节点身份:key用来识别

数组更新检测方法

用来操作数组的方法

· 变异方法

主要对数组的添加删除排序等操作

Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：push()pop()shift()unshift()splice()sort()reverse()你可以打开控制台，然后对前面例子的 items 数组尝试调用变异方法。比如 example1.items.push({ message: 'Baz' })

· 替换数组

操作方法返回新数组

变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/)})你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

· 注意事项

vm.items[1] = 'x' // 不是响应性的

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：vm.items.length = newLength举个例子：var vm = new Vue({ data: { items: ['a', 'b', 'c'] }})vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：// Vue.setVue.set(vm.items, indexOfItem, newValue)// Array.prototype.splicevm.items.splice(indexOfItem, 1, newValue)你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：vm.$set(vm.items, indexOfItem, newValue)为了解决第二类问题，你可以使用 splice：vm.items.splice(newLength)

对象变更检测注意事项

· 添加修改对象值

• 以前vm.b = 2

这种不是响应式的

• Vue.set(vm.userProfile. 'age'. 27)

vue响应式的方法一

• vm.$set(vm.userProfile. 'age'. 27)

vue响应式的方法二

· 添加修改对象多个值

有时你可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：Object.assign(vm.userProfile, { age: 27, favoriteColor: 'Vue Green'})你应该这样做：vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green'})

显示过滤/排序后的结果

· 可以使用计算属性

想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据data: { numbers: [ 1, 2, 3, 4, 5 ]},computed: { evenNumbers: function () { return this.numbers.filter(function (number) { return number % 2 === 0 }) }}

v-for取值范围

v-for='n in 10'循环1-10

在templage上使用v-for

类似于 v-if，你也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。比如：<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation"></li> </template></ul>

v-for和v-if同时使用

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }}</li>上面的代码将只渲染未完成的 todo。原理是v-for优先级高,所以先循环v-for,然后判断v-if变量是否有值,有值就显示

在组件上使用v-for

<my-component v-for="item in items" :key="item.id"></my-component>

· 先引用v-for语句

<my-component v-for="item in items" :key="item.id"></my-component>

· 此时虽然引用v-for因为作用域不同还需要进行传值

在组件用:item='item' :key='item.id'传递上面的item循环单项值

事件处理

v-on:之后的事件以及修饰符

监听事件

v-on监听dom点击覆盖等等

· v-on:click="count++"

count变量点击加1

· v-on:click="func('hi')"

func有括号表示有参数

事件修饰符

v-on:click.修饰符

· @click.stop

阻止单击事件冒泡传播

· @click.prevent

阻止默认行为不再重载页面

· @click.stop.prevent

时间修饰符可以串联使用

· @click.self

单击自身才触发.内部元素不算

· @click.once

只能点击一次

按键修饰符

v-on:keyup.修饰符

· @keyup.enter='xx'

按下enter触发函数

· @keyup.page-down='xx'

按下下一页触发函数

· @keyup.其他常用的按键名

enter/tab/delete/esc/space/up/down/left/right/ctrl/alt/shift

· 全局配置config.keyCodes键码别名

Vue.config.keyCodes.f1 = 112

· @click.ctrl.exact(2.5版本可用)

仅仅ctrl可用/组合件不可用

表单输入绑定

v-model在表单中的应用

v-model双向数据绑定并实时监测更新

应用在input/textarea/select等form元素

注意如果使用了v-model,表单将会忽略所有表单内的value,checked,selected特性的初始值,将v-model的数据作为表单的初始值.

样例demo在连接

修饰符

v-model.number

· v-model.lazy=msg

在input输入不及时更新.切换下行才更新

· v-model.number='age'

在input输入的数据转换成数值

· v-model.trim='msg'

自动过滤数据两边的空格

组件基础

父内定义components或者Vue.component

// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'})

组件component特点

可以复用但是没有el元素

· data必须是一个函数最后return对象数据

vue实例data是一个对象

· 组件树

每个组件又包含其他的小组件

通过prop支撑向子组件传递数据

父组件向子组件传递数据

· 假设父组件有site:'helloword'我要用

· 先定义全局组件

Vue.component('blog-post'.{

· 再定义props数组定义子变量

props: ['title']//这里title是临时变量仅可以在模版调用

· 在blog-post组件内模版调用title使用

template: '<h3>{{ title }}</h3>'

· 最后要<blog-post :title='site'>绑定父组件属性

建立实例和组件的联系上面才有效

· 如果父组件site是一个对象或数组上面还需要v-for循环上面也要改

<blog-post v-for='post in posts' :key='post.id' :titles='post.titles'

通过插槽分发内容

就是<log>world</log>

· 在组件模版内定义templage内容

然后最后加上<slot></slot>插槽

· html中调用标签之内有内容自动添加

<log>world</log>world会添加到slot中

动态组件

· 放在html中的component标签必须有is属性

· is属性对应一个变量.值就是对应模版的名字

深入了解组件

全局组件注册

组件名

Vue.component('name'.{ ...})

组件名大小写都可以,但是在html中引用的时候大写需要转化成-比如myName需要转换成<my-name>使用

局部注册

在实例内components

自定义事件

this.$emit('myevent')都写成小写

组件调用js原生函数

v-on:focus.native="onFocus"//.native修饰符

插槽

在模版中<slot></slot>

调用变量作用域

和模版作用域一样

<navigation-link url="/profile"> Clicking here will send you to: {{ url }} </navigation-link>父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

<slot>后备内容</slot>

当组件标签之内没有内容输入这个

带name属性的插槽

· 之后在模版标签中定义v-slot="header"

· 插槽引用变量的作用域

<slot v-bind:user="user">绑定作用域才可以用.不然只能在组件上用

独占默认插槽的缩写语法

· 先在组件标签上定义v-slot

<current-user v-slot:default="slotProps">

· 然后在组件内部引用变量对象

动态组件和异步组件

在动态组件上使用keep-alive保持状态

<keep-alive><log></log><keep-alive>

其他知识点

访问根实例就是new vue的数据

this.$root.foo

访问父级组件实例

this.$parent.map

访问子组件实例或子元素(必须在组件定义属性ref='nihk'名字)

this.$refs.nihk

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

程序化的时间侦听器

· $on(eventName.eventHandler)

侦听一个事件

· $once()

侦听一个事件一次

· $off()停止侦听一个事件

X-template

用script标签引用模版

另一个定义模板的方式是在一个 <script> 元素中，并为其带上 text/x-template 的类型，然后通过一个 id 将模板引用过去。例如：<script type="text/x-template" id="hello-world-template"> <p>Hello hello hello</p></script>Vue.component('hello-world', { template: '#hello-world-template'})x-template 需要定义在 Vue 所属的 DOM 元素外。

控制更新(数据双向绑定的更新)

$forceUpdate

过渡和动画

单元素/组件的过渡

这里是一个例子点击按钮让p标签渐渐fade褪色消失1.要在什么地方动画,就在什么地方加<transition name="fade">标签2.接着在css中定义fade-enter-active等属性<div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition></div>new Vue({ el: '#demo', data: { show: true }}).fade-enter-active, .fade-leave-active { transition: opacity .5s;}.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0;}当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

上例涉及到的过渡css类名

在进入/离开的过渡中，会有 6 个 class 切换。v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。我看黑马教程用的是v-enter设定属性,原来原理在这里:对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

css动画可结合animate等库

初始渲染的过渡

在transition加上appear属性设定刚开始动画

过渡模式(两个按钮之间的切换)

需要将第二个按钮加上css相对位置

在div上设定position: relative;在按钮button中设定position: absolute;

简单的写法在transition加上mode="out-in"

即可实现元素平稳过渡

组件之间的过渡一样在组件外加transition标签

设定css和上面一样

ul-li列表的过渡

在循环元素外加<transition-group>包裹

状态过渡

比如元素变大/颜色改变等特效

混入及其他杂项

定义个对象使用mixin进行混入

自定义指令

Vue.directive('focus'.{})

定义一个v-focus全局自定义指令

定义好在标签中直接用<input v-focus>

// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})如果想注册局部指令，组件中也接受一个 directives 的选项：directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } }}然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：<input v-focus>

一个指令对象中有好多钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

渲染函数&&JSX

在全局组件定义内render:function(dom){}

节点树和虚拟dom

在组件模版中插入h1有两种方式<h1>{{ blogTitle }}</h1>或者一个渲染函数里：render: function (createElement) { return createElement('h1', this.blogTitle)}第二个中createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

createElement 参数

虚拟dom的方法

// @returns {VNode}createElement( // {String | Object | Function} // 一个 HTML 标签名、组件选项对象，或者 // resolve 了上述任何一种的一个 async 函数。必填项。 'div', // {Object} // 一个与模板中属性对应的数据对象。可选。 { // (详情见下一节) }, // {String | Array} // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成， // 也可以使用字符串来生成“文本虚拟节点”。可选。 [ '先写一些文字', createElement('h1', '一则头条'), createElement(MyComponent, { props: { someProp: 'foobar' } }) ])

vue插件

为vue添加全局功能

比如vue-route

过滤器

使用filters:定义

或者在创建 Vue 实例之前全局定义过滤器：Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1)})new Vue({ // ...})

或者<div v-bind:id="rawId | formatId"></div>

一些工具介绍

单文件组件

文件扩展名为 .vue 的单文件组件定义方式

这是一个单文件组件,定义hello.vue<template> <p>{{ greeting }} World!</p></template><script>module.exports = { data: function () { return { greeting: 'Hello' } }}</script><style scoped>p { font-size: 2em; text-align: center;}</style>