模板1: 

login.vue

<template><p class="login"><el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane label="登录" name="first"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item> <el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input></el-form-item> <el-form-item><el-button type="primary" @click="submitForm(’ruleForm’)">登录</el-button> <el-button @click="resetForm(’ruleForm’)">重置</el-button></el-form-item></el-form></el-tab-pane> <el-tab-pane label="注册" name="second"><register></register></el-tab-pane></el-tabs></p></template> <script>import register from ’@/components/register’; export default {data() {var validatePass = (rule, value, callback) => {if (value === ’’) {callback(new Error(’请输入密码’));} else {if (this.ruleForm.checkPass !== ’’) {this.$refs.ruleForm.validateField(’checkPass’);} callback();}}; return {activeName: ’first’,ruleForm: {name: ’’,pass: ’’,checkPass: ’’},rules: {name: [{ required: true, message: ’请输入您的名称’, trigger: ’blur’ }, { min: 2, max: 5, message: ’长度在 2 到 5 个字符’, trigger: ’blur’ }],pass: [{ required: true, validator: validatePass, trigger: ’blur’ }]}};}, methods: {//选项卡切换handleClick(tab, event) {},//重置表单resetForm(formName) {this.$refs[formName].resetFields();},//提交表单submitForm(formName) {this.$refs[formName].validate(valid => {if (valid) {this.$message({type: ’success’,message: ’登录成功’});this.$router.push(’home’);} else {console.log(’error submit!!’);return false;}});}},components: {register}};</script> <style lang="scss">.login {width: 400px;margin: 0 auto;} .el-tabsitem {text-align: center;width: 60px;}</style>

register.vue

//register组件 <template><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="用户名" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm(’ruleForm’)">注册</el-button><el-button @click="resetForm(’ruleForm’)">重置</el-button></el-form-item></el-form></template> <script>export default {data() {var validatePass = (rule, value, callback) => {if (value === ’’) {callback(new Error(’请输入密码’));} else {if (this.ruleForm.checkPass !== ’’) {this.$refs.ruleForm.validateField(’checkPass’);}callback();}}; var validatePass2 = (rule, value, callback) => {if (value === ’’) {callback(new Error(’请再次输入密码’));} else if (value !== this.ruleForm.pass) {callback(new Error(’两次输入密码不一致!’));} else {callback();}}; return {activeName: ’second’,ruleForm: {name: ’’,pass: ’’,checkPass: ’’},rules: {name: [{ required: true, message: ’请输入您的名称’, trigger: ’blur’ }, { min: 2, max: 5, message: ’长度在 2 到 5 个字符’, trigger: ’blur’ }],pass: [{ required: true, validator: validatePass, trigger: ’blur’ }],checkPass: [{ required: true, validator: validatePass2, trigger: ’blur’ }]}};}, methods: {submitForm(formName) {this.$refs[formName].validate(valid => {if (valid) {this.$message({type: ’success’,message: ’注册成功’});// this.activeName: ’first’,} else {console.log(’error submit!!’);return false;}});}, resetForm(formName) {this.$refs[formName].resetFields();}}};</script>

效果图

模板2:

 

login.vue

<template> <el-row type="flex" justify="center"> <el-form ref="formData" :model="formData" :rules="rules" label-width="80px" @keyup.enter.native="login()"> <el-form-item prop="userName" label="用户名"><el-input v-model="formData.userName" placeholder="请输入用户名" prefix-icon="icon-login_user" clearable></el-input></el-form-item> <el-form-item prop="password" label="密码"><el-input v-model="formData.password" placeholder="请输入密码" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item> </el-form-item> <el-form-item><el-button type="primary" class="btn" @click="login(’formData’)" icon="el-icon-upload">登录</el-button> <el-button @click="resetForm(’formData’)">重置</el-button></el-form-item></el-form-item> <router-link to="register">没有密码?注册</router-link> </el-form> </el-row></template><script>export default { data() { return { formData: { userName: ’’, password: ’’ }, rules: { userName: [{ required: true, message: ’用户名不能为空’, trigger: ’blur’ }], password: [{ required: true, message: ’密码不能为空’, trigger: ’blur’ }] } }; }, methods: { login(formName) { this.$refs[formName].validate(valid => {if (valid) {this.$message({type: ’success’,message: ’登录成功’ }); this.$router.push({name:’home’});} else {console.log(’error submit!!’);return false;}}); }, resetForm(formName) {this.$refs[formName].resetFields();} }};</script>

register.vue

<template> <el-row type="flex" justify="center"> <el-form ref="formData" :model="formData" :rules="rules" label-width="80px" @keyup.enter.native="register()"> <el-form-item prop="userName" label="用户名"><el-input v-model="formData.userName" placeholder="请输入用户名" prefix-icon="icon-login_user" clearable></el-input></el-form-item> <el-form-item prop="password" label="密码"><el-input v-model="formData.password" placeholder="请输入密码" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item> <el-form-item prop="cheackPassword" label="确认密码"><el-input v-model="formData.cheackPassword" placeholder="再次输入密码" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item> </el-form-item> <el-form-item> <el-button type="primary" @click="register(’formData’)" icon="el-icon-upload">注册</el-button> <el-button @click="resetForm(’formData’)">重置</el-button></el-form-item> <router-link to="login">已有密码?登录</router-link> </el-form> </el-row></template><script>export default { data() { var validatePass = (rule, value, callback) => {if (value === ’’) {callback(new Error(’请再次输入密码’));} else if (value !== this.formData.password) {callback(new Error(’两次输入密码不一致!’));} else {callback();}}; return { formData: { userName: ’’, password: ’’, cheackPassword:’’ }, rules: { userName: [{ required: true, message: ’用户名不能为空’, trigger: ’blur’ }], password: [{ required: true, message: ’密码不能为空’, trigger: ’blur’ }], cheackPassword: [{ required: true, validator: validatePass, trigger: ’blur’ }] } }; }, methods: { register(formName) { this.$refs[formName].validate(valid => {if (valid) {this.$message({type: ’success’,message: ’注册成功’ }); this.$router.push({name:’login’});} else {console.log(’error submit!!’);return false;}}); }, resetForm(formName) {this.$refs[formName].resetFields();} }};</script>

效果图

到此这篇关于vue实现登录注册模板的示例代码的文章就介绍到这了,更多相关vue 登录注册模板内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

vue项目实现用户登录 以及携带token

&lt

vue2开发移动端解决登录成功后,登录页面还在的问题

其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能。

15《Vue 入门教程》Vue 动态组件 &amp;amp; keep-alive

本小节我们将介绍 Vue 的动态组件,以及缓存 keep-alive 的使用。包括动态组件的使用方法,以及如何使用 keep-alive 实现组件的缓存效果。

动态组件是 Vue 的一个高级用法,但其实它的使用非常简单。keep-alive 是 vue 的内置组件,能在组件切换过程中将状态保存在内存中,防止重复渲染 DOM。 通过使用保留的 元素,动态地把组件名称绑定到它的 is 特性,可以实现动态组件: 实例演示 "运行案例" 可查看在线运行效果 代码解释: HTML 代码第 2 行,我们使用动态组件 component,将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 3-5 行,我们定义了三个按钮,通过点击按钮切换 currentView 的值。

JS 代码第 3-11 行,我们定义了组件 ComponentA、ComponentB、ComponentC。 最终的实现效果是:当点击按钮的时候会动态切换展示的组件。 keep-alive 是 Vue 提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个 DOM 元素。

被 keep-alive 缓存的组件只有在初次渲染时才会被创建,并且当组件切换时不会被销毁。 keep-alive 的用法相对简单,直接使用 keep-alive 包裹需要缓存的组件即可: 实例演示 "运行案例" 可查看在线运行效果 代码解释: HTML 代码第 2-3 行,我们使用 keep-alive 包裹动态组件 component,将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-7 行,我们定义了三个按钮,通过点击按钮切换 currentView 的值。

JS 代码第 3-29 行,我们定义了组件 ComponentA、ComponentB、ComponentC,分别定义了他们的 created 和 beforeDestroy 事件。 之前我们介绍过, keep-alive 缓存的组件只有在初次渲染时才会被创建。所以,我们通过修改 currentView 切换组件时,组件的 beforeDestroy 事件不会触发。

若该组件是第一次渲染,会触发 created 事件,当再次切换显示该组件时,created 事件不会再次触发。 activated 和 deactivated 和我们之前学习的生命周期函数一样,也是组件的生命周期函数。不过, activated 和 deactivated 只在 内的所有嵌套组件中触发。 activated :进入组件时触发。

deactivated :退出组件时触发。 示例代码: 实例演示 "运行案例" 可查看在线运行效果 代码解释: JS 代码中,我们定义了组件 ComponentA、ComponentB,并分别定义了他们的 activated 和 deactivated 事件函数。 HTML 代码第 2-3 行,我们使用 keep-alive 包裹动态组件 component,将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-6 行,我们定义了两个按钮,通过点击按钮切换 currentView 的值。

当我们切换组件显示时,可以看到这样的打印信息: include 和 exclude 是 keep-alive 的两个属性,允许组件有条件地缓存。 include: 可以是字符串或正则表达式,用来表示只有名称匹配的组件会被缓存。 exclude: 可以是字符串或正则表达式,用来表示名称匹配的组件不会被缓存。 示例: 实例演示 "运行案例" 可查看在线运行效果 代码解释: HTML 代码第 2-4 行,我们使用 keep-alive 包裹动态组件 component。

给 keep-alive 指定需要缓存组件 ComponentA,ComponentB。 在之前的小节我们了解到 keep-alive 缓存的组件只有在初次渲染时才会被创建。所以,在案例中,组件 ComponentA 和 ComponentB 的 created 函数只有在第一次组件被创建的时候才会触发,而 ComponentC 的 created 函数当每次组件显示的时候都会触发。

exclude 示例: 实例演示 "运行案例" 可查看在线运行效果 代码解释: HTML 代码第 2-4 行,我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定不需要缓存组件 ComponentA,ComponentB。 本节,我们带大家学习了动态组件和缓存组件在项目中的运用。

认识Vue.js+Vue.js的优缺点+和与其他前端框架的区别

首先,我们先了解什么是MVX框架模式?MVX框架模式:MVC+MVP+MVVM1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。View通过Controller来和Model联系,Controller是View和Model的协调者,View和Model不直接联系,基本联系都是单向的。

2.MVP:是从MVC模式演变而来的,都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。在MVP中,Presenter完全把View和Model进行了分离,主要的程序逻辑在Presenter里实现。并且,Presenter和View是没有直接关联的,是通过定义好的接口进行交互,从而使得在变更View的时候可以保持Presenter不变。MVP模式的框架:Riot,js。

3.MVVM:MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。

这种自动同步是因为ViewModel中的属性实现了Observer,当属性变更时都能触发对应的操作。MVVM模式的框架有:AngularJS+Vue.js和Knockout+Ember.js后两种知名度较低以及是早起的框架模式。Vue.js是什么?看到了上面的框架模式介绍,我们可以知道它是属于MVVM模式的框架。

那它有哪些特性呢?其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库。Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组件系统。Vue.js的特性如下:1.轻量级的框架2.双向数据绑定3.指令4.插件化Vue.js与其他框架的区别?1.与AngularJS的区别相同点:都支持指令:内置指令和自定义指令。

都支持过滤器:内置过滤器和自定义过滤器。都支持双向数据绑定。都不支持低端浏览器。不同点:1.AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。

2.在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢。Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。对于庞大的应用来说,这个优化差异还是比较明显的。

2.与React的区别相同点:React采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。中心思想相同:一切都是组件,组件实例之间可以嵌套。都提供合理的钩子函数,可以让开发者定制化地去处理需求。都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。

在组件开发中都支持mixins的特性。不同点:React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。

Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作DOM。

Vue组件中prop属性使用说明实例代码详解

Prop的大小写(camelCasevskebab-case)HTML中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用DOM中的模板时,camelCase(驼峰命名法)的prop名需要使用其等价的kebab-case(短横线分隔命名)命名:Vue.component('blog-post',{//在JavaScript中是camelCase的props:['postTitle'],template:'<h3>{{postTitle}}</h3>'})<!--在HTML中是kebab-case的--><blog-postpost-title="hello!"></blog-post>重申一次,如果你使用字符串模板,那么这个限制就不存在了。

传入一个数字<!--即便`42`是静态的,我们仍然需要`v-bind`来告诉Vue--><!--这是一个JavaScript表达式而不是一个字符串。--><blog-postv-bind:likes="42"></blog-post><!--用一个变量进行动态赋值。--><blog-postv-bind:likes="post.likes"></blog-post>传入一个布尔值<!--包含该prop没有值的情况在内,都意味着`true`。--><blog-postfavorited></blog-post><!--即便`false`是静态的,我们仍然需要`v-bind`来告诉Vue--><!--这是一个JavaScript表达式而不是一个字符串。

--><base-inputv-bind:favorited="false"><!--用一个变量进行动态赋值。--><base-inputv-bind:favorited="post.currentUserFavorited">传入一个数组<!--即便数组是静态的,我们仍然需要`v-bind`来告诉Vue--><!--这是一个JavaScript表达式而不是一个字符串。--><blog-postv-bind:comment-ids="[234,266,273]"></blog-post><!--用一个变量进行动态赋值。

--><blog-postv-bind:comment-ids="post.commentIds"></blog-post>传入一个对象<!--即便对象是静态的,我们仍然需要`v-bind`来告诉Vue--><!--这是一个JavaScript表达式而不是一个字符串。--><blog-postv-bind:comments="{id:1,title:'MyJourneywithVue'}"></blog-post><!--用一个变量进行动态赋值。--><blog-postv-bind:post="post"></blog-post>传入一个对象的所有属性如果你想要将一个对象的所有属性都作为prop传入,你可以使用不带参数的v-bind(取代v-bind:prop-name)。

例如,对于一个给定的对象post:post:{id:1,title:'MyJourneywithVue'}下面的模板:<blog-postv-bind="post"></blog-post>等价于:<blog-postv-bind:id="post.id"v-bind:title="post.title"></blog-post>Vue的组件中的props属性单向数据流所有的prop都使得其父子prop之间形成了一个单向下行绑定:父级prop的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。额外的,每次父级组件发生更新时,子组件中所有的prop都将会刷新为最新的值。

这意味着你不应该在一个子组件内部改变prop。如果你这样做了,Vue会在浏览器的控制台中发出警告。这里有两种常见的试图改变一个prop的情形:这个prop用来传递一个初始值;这个子组件接下来希望将其作为一个本地的prop数据来使用。在这种情况下,最好定义一个本地的data属性并将这个prop用作其初始值:props:['initialCounter'],data:function(){return{counter:this.initialCounter}}这个prop以一种原始的值传入且需要进行转换。

在这种情况下,最好使用这个prop的值来定义一个计算属性:props:['size'],computed:{normalizedSize:function(){returnthis.size.trim().toLowerCase()}}注意在JavaScript中对象和数组是通过引用传入的,所以对于一个数组或对象类型的prop来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态。Prop验证我们可以为组件的prop指定需求。如果有一个需求没有被满足,则Vue会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

为了定制prop的验证方式,你可以为props中的值提供一个带有验证需求的对象,而不是一个字符串数组。例如:Vue.component('my-component',{props:{//基础的类型检查(`null`匹配任何类型)propA:Number,//多个可能的类型propB:[String,Number],//必填的字符串propC:{type:String,required:true},//带有默认值的数字propD:{type:Number,default:100},//带有默认值的对象propE:{type:Object,//对象或数组且一定会从一个工厂函数返回默认值default:function(){return{message:'hello'}}},//自定义验证函数propF:{validator:function(value){//这个值必须匹配下列字符串中的一个return['success','warning','danger'].indexOf(value)!==-1}}}})当prop验证失败的时候,(开发环境构建版本的)Vue将会产生一个控制台的警告。注意那些prop会在一个组件实例创建之前进行验证,所以实例的属性(如data、computed等)在default或validator函数中是不可用的。类型检查type可以是下列原生构造函数中的一个:String Number Boolean Function Object Array Symbol额外的,type还可以是一个自定义的构造函数,并且通过instanceof来进行检查确认。

例如,给定下列现成的构造函数:functionPerson(firstName,lastName){this.firstName=firstNamethis.lastName=lastName}你可以使用:Vue.component('blog-post',{props:{author:Person}})来验证authorprop的值是否是通过newPerson创建的。非Prop的特性一个非prop特性是指传向一个组件,但是该组件并没有相应prop定义的特性。因为显式定义的prop适用于向一个子组件传入信息,然而组件库的作者并不总能预见组件会被用于怎样的场景。

这也是为什么组件可以接受任意的特性,而这些特性会被添加到这个组件的根元素上。例如,想象一下你通过一个Bootstrap插件使用了一个第三方的组件,这个插件需要在其上用到一个data-date-picker特性。我们可以将这个特性添加到你的组件实例上:<bootstrap-date-inputdata-date-picker="activated"></bootstrap-date-input>然后这个data-date-picker=”activated”特性就会自动添加到<bootstrap-date-input>的根元素上。

替换/合并已有的特性想象一下<bootstrap-date-input>的模板是这样的:<inputtype="date"class="form-control">为了给我们的日期选择器插件定制一个主题,我们可能需要像这样添加一个特别的类名:<bootstrap-date-inputdata-date-picker="activated"class="date-picker-theme-dark"></bootstrap-date-input>在这种情况下,我们定义了两个不同的class的值:form-control,这是在组件的模板内设置好的date-picker-theme-dark,这是从组件的父级传入的 对于绝大多数特性来说,从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入type=”text”就会替换掉type=”date”并把它破坏!庆幸的是,class和style特性会稍微智能一些,即两边的值会被合并起来,从而得到最终的值:form-controldate-picker-theme-dark。禁用特性继承如果你不希望组件的根元素继承特性,你可以设置在组件的选项中设置inheritAttrs:false。例如:Vue.component('my-component',{inheritAttrs:false,//...})这尤其适合配合实例的$attrs属性使用,该属性包含了传递给一个组件的特性名和特性值,例如:{class:'username-input',placeholder:'Enteryourusername'}有了inheritAttrs:false和$attrs,你就可以手动决定这些特性会被赋予哪个元素。

在撰写基础组件的时候是常会用到的:Vue.component('base-input',{inheritAttrs:false,props:['label','value'],template:`<label>{{label}}<inputv-bind="$attrs"v-bind:value="value"v-on:input="$emit('input',$event.target.value)"></label>`})这个模式允许你在使用基础组件的时候更像是使用原始的HTML元素,而不会担心哪个元素是真正的根元素:<base-inputv-model="username"class="username-input"placeholder="Enteryourusername"></base-input>总结以上所述是小编给大家介绍的Vue组件中prop属性使用说明,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。

(Vue -03)Vue绑定样式 + 计算属性 + 侦听器+ 过滤器

Vue官方文档 首页-学习下拉栏-文档-教程 =>火速一键进入学习 (1) 绑定一个对象,对象的属性名是类选择器名称,属性值返回 true ,表示添加该选择器 绑定的对象的,属性名 bgColor 是 css 里的 类选择器的名字 , 属性值 bgColor 是 数据里设置的属性名 ┗|`O′|┛ 嗷~~ 初始化设定了是 false ,然后点击的时候呢给它变成 true ,添加成功啦 (2) 绑定一个三元表达式 三元表达式语法结构: 条件表达式 ? 表达式1 : 表达式2 如果条件表达式结果为 true ,则返回 表达式1 ;如果为 false ,则返回 表达式2 的值。 绑定的三元表达式条件为true时,添加选择器;条件为false则不添加。

Vue官方的-计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: 在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。

当你想要在模板中的多处包含此翻转字符串时,就会更加难以处理。 所以,对于任何复杂逻辑,你都应当使用 计算属性 。 好耶~让我们开始吧┗|`O′|┛ 嗷~~ 此时页面效果为: 姓名栏 中的 value 值会随着 姓栏 和 名栏 的输入而改变,但是需要在 姓名栏 中拼接。

有两种办法可以解决: 通过这个方法返回 this.firstName+ '.'+ this.lastName ,然后再去调用这个方法。如下: 结果是由两个属性拼接而来,说明 结果是由这两个属性计算而来。 在data同级,加一个 computed 选项,用于定义计算属性,里面定义的是方法;计算属性本质上是方法,在模板中当成属性去使用。

如下: 此时把 :value 改成 v-model ,并不能实现双向绑定,且会报错。 注意: 计算属性默认情况下只能读,不能改。 如果想要让计算属性既能读,又能改,那就要换一种形式啦~ ① 在 computed 里定义完整结构的计算属性,然后使用v-model进行绑定计算属性。

② get方法,用于返回计算属性的值。 ③ set方法,用于修改计算属性的值,记得传值。 如下: 计算属性的优势是: 有缓存 。 当页面数据发生变化时,所有的方法都要重新执行。

当计算属性用到的数据发生变化时,计算属性才会执行。 比如计算商品总价时,最好是用计算属性,它有缓存嘛 根据属性的名称,定义一个方法,用于侦听该属性的变化。 当属性的值发生变化时,该方法就会执行。 这个方法,有两个参数,第一个参数是最新值,第二参数是旧值。

如果要实现深度侦听对象的变化(也就是对象具体属性的变化),就需要使用完整的写法,定义一个对象。 deep 属性开启深度监视,值为 true 或 false immediate 属性设定页面加载完成时,先运行一次,值为 true 或 false               (注意:这种情况下,旧值是 undefined ) handler 定义监视的函数 注意:开启深度监视后,旧值已经没有意义,因为对象是引用类型,对象的属性值已经改了,就没有旧的属性值。 当前计算属性里面用到数据发生变化时,会重新执行计算属性, 只是计算属性必须要在模板中使用(方法要在页面中用一下) Vue官方的-过滤器 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部, 由“管道”符号 | 指示。

局部过滤器(Vue实例内部定义的过滤器),只有当前Vue实例可以访问。 在 filters 中定义过滤器。 通过 管道符 | 调用过滤器,其实就是调用那个方法,将值传进去,再返回新的值。

过滤器可以 链式调用 ,就是之前已经过滤完成的结果,继续传给下一个过滤器,注意顺序。 在创建 Vue 实例之前定义的全局过滤器,所有的Vue实例都可以访问。 如果局部过滤器和全局过滤器冲突,优先级更高的是局部过滤器。

一般将全局过滤器,会单独创建一个filter文件夹存放┗|`O′|┛ 嗷~~, 记得在html文件里引入。