Vue学习笔记
vue3学习笔记（九）——scriptsetup语法糖用了才知道有多爽
vue3学习笔记（九）——scriptsetup语法糖⽤了才知道有多爽刚开始使⽤ script setup 语法糖的时候，编辑器会提⽰这是⼀个实验属性，要使⽤的话，需要固定 vue 版本。
在 6 ⽉底，该提案被正式定稿，在 v3.1.3 的版本上，继续使⽤但仍会有实验性提案的提⽰，在 V3.2 中，才会去除提⽰并移除⼀些废弃的API。
script setup 是啥？是 vue3 的新语法糖，并不是新增的功能模块，只是简化了以往的组合式 API 必须返回(return)的写法，并且有更好的运⾏时性能。
写法简便：<script setup>...</script>使⽤ script setup 语法糖时，内部的属性或⽅法可以直接使⽤，⽆需 return 返回；引⼊⼦组件可以⾃动注册，⽆需 components 注册可直接使⽤等等，接下来介绍 script setup 语法糖具体使⽤以及与 setup() 函数的区别。
1、属性和⽅法⽆需返回，可直接使⽤setup() 来写组合式 API 时，内部定义的属性和⽅法，必须使⽤ return 暴露到上下⽂，外部才能够使⽤，否则就会报错，写法为：<template>{{todoList}}</template><script>export default {setup(){let todoList = [{todo:"我想看海",isCheck:false},{todo:"我想浪漫",isCheck:true},]return{todoList,}}}</script>使⽤ script setup 语法糖，不需要 return 和 setup函数，只需要全部定义到 script setup 内。
可以简化上述代码为：<template>{{todoList}}</template><script setup>let todoList = [{todo:"我想看海",isCheck:false},{todo:"我想浪漫",isCheck:true},]</script>2、组件⾃动注册在 script setup 语法糖中，引⼊的组件可以⾃动注册，不需要再通过 components 进⾏注册，⽽且⽆法指定当前组件的名字，会⾃动以⽂件名为主，省去了 name 属性。
vue-element-admin学习笔记--登陆功能
vue-element-admin学习笔记--登陆功能没有按照vue-element-admin的⽅式设计登陆,先简单的实现⼀个登陆功能登陆功能完成功能思路如下：router⾥配置访问后的BasicLayout路由及404⽤户点击登录按钮,将参数值提交到后台使⽤vuex实现参数提交vuex中通过request(封装axios)模拟mock请求，返回token及⾓⾊(admin、guest、user)登陆成功返回到BasicLayout的页⾯，登陆失败返回404页⾯配置devServer及mock⽂件夹router中配置import Vue from "vue";import VueRouter from "vue-router";import NotFound from "@/views/404.vue";/*** 重写路由的push⽅法*/const routerPush = VueRouter.prototype.push;VueRouter.prototype.push = function push(location) {return routerPush.call(this, location).catch(error => error);};e(VueRouter);const routes = [{path: "/",name: "Home",component: () =>import(/* webpackChunkName: "layout" */ "@/layouts/BasicLayout.vue")},{path: "/about",name: "About",// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () =>import(/* webpackChunkName: "about" */ "../views/About.vue")},{path: "/user",component: { render: h => h("router-view") },children: [{ path: "/user", redirect: "/user/login" },{path: "/user/login",name: "login",component: () =>import(/* webpackChunkName: "user" */ "@/views/user/Login.vue")},{path: "/user/register",name: "register",component: () =>import(/* webpackChunkName: "user" */ "@/views/user/Register.vue")}]},{ path: "*", name: "404", component: NotFound }];const router = new VueRouter({mode: "history",base: process.env.BASE_URL,routes});export default router;配置vuex中的⽅法和参数编写⽅法在store下新建modules⽂件夹,新建⼀个user的store⽂件user.js 配置user中的登陆⽅法import router from "@/router";import request from "@/utils/request";const state = {userInfo: {name: "",token: "",password: "",roles: []}};const actions = {submitlogin({ commit }, { payload }) {const { username, password } = payload;//提交mock请求request({url: "/api/user/login",method: "post",data: { name: username, password: password }}).then(response => {if (erInfo.token != "error") {commit("SET_ROLES", erInfo.roles);commit("SET_NAME", );commit("SET_TOKEN", erInfo.token);router.push("/");} else {console.log(erInfo.token);router.push("/404");}});}};const mutations = {SET_TOKEN: (state, token) => {erInfo.token = token;},SET_NAME: (state, name) => { = name;},SET_ROLES: (state, roles) => {erInfo.roles = roles;}};export default {namespaced: true,state,mutations,actions};在store中的index.js中注册user模块import Vue from "vue";import Vuex from "vuex";import user from "./modules/user";e(Vuex);export default new Vuex.Store({state: {},mutations: {},actions: {},modules: { user }});封装axios安装axiosyarn add axios封装axiosimport axios from "axios";function request(options) {return axios(options).then(res => {return res;}).catch(error => {const {response: { status, statusText }} = error;//后期修改为提⽰框console.log({ status: status, statusText: statusText });return Promise.reject(error);});}export default request;配置mock配置devServer，根据vue-cli及webpack中的API，配置代理mock在vue.config.js中添加bodyParserconst bodyParser = require("body-parser");配置devServerdevServer: {before(app) {e(bodyParser.json()); //通过bodyParser获取req.body},proxy: {"/api": {target: "http://localhost:63000",bypass: function(req, res) {if (req.headers.accept.indexOf("html") !== -1) {console.log("Skipping proxy for browser request.");return "/index.html";} else if (process.env.MOCK !== "none") {const name = req.path.split("/api/")[1].split("/").join("_");const mock = require(`./mock/${name}`);const result = mock(req);//删除缓存.否是数据修改后不会变delete require.cache[require.resolve(`./mock/${name}`)];return res.send(result);}}}}},Mock数据在src同级⽬录建⽴mock⽂件夹，按照devServer中的规则建⽴Mock数据。
《Vue js Node js全栈开发实战》读书笔记思维导图
第13章 项目实战：基于 Vue.js+N...
01
13.1 学生 成绩管理系 统组织架构 设计
02
13.2 构建 项目应用框 架
03
13.3 后台 数据结构
04
13.4 功能 模块组件设 计
06
13.6 测试 应用
05
13.5 功能 模块路由设 计
第14章 项目实战：基于 Vue.js+N...
第11章 Vue.js组件基础
11.2 Vue.js局部组 件
11.1 Vue.js全局组 件
11.3 通过Prop向 子组件传递数据
第12章 Vue.js路由
12.2 基于vuerouter库开发...
12.1 安装vuerouter库的方...
12.3 基于vuerouter库实现...
01
14.1 全国 城市信息查 询系统组织 架构设...
02
14.2 构建 项目应用框 架
03
14.3 后台 数据获取方 式
04
14.4 功能 模块组件设 计
06
14.6 测试 应用
05
14.5 功能 模块路由设 计
感谢观看
读
书
笔
记
012
第11章 Vue.js组件 基础
目录
013 第12章 Vue.js路由
015
第14章 项目实战： 基于Vue.js+N...
014
第13章 项目实战： 基于Vue.js+N...
本书着眼于实战开发，以Node.js和Vue.js原生知识和框架实战为主线，详细介绍Node.js + Vue.js开发 的基础知识和相应案例实践。Node.js后端包括console、assert、fs、path、http、url、tcp、udp等核心模 块、与MongoDB和MySQL数据库的连接方法等。Vue.js前端包括模板语法、生命周期、指令系统、样式绑定和 路由等内容。同时，本书着重介绍基于Node.js + Vue.js开发的工具选择、环境搭建和项目构建等内容，所有案 例都提供了详尽的源代码及其注释。全书共14章，主要内容有Node.js和Vue.js环境搭建、Node.js语法基础、 Node.js包管理机制、Node.js网络开发、Node.js文件模块使用、Node.js数据库开发、Vue.js数据、方法与生 命周期、Vue.js模板语法、Vue.js指令系统、Vue.js样式绑定和Vue.js路由，以及两个Node.js+Vue.js实战项 目。本书内容丰富、实例典型、实用性强，适合希望学习Node.js+Vue.js全栈开发的初学者，也适合作为高等 院校和培训学校计算机及其相关专业师生的参考书。
vue的switch语法
vue的switch语法Vue.js是一种流行的JavaScript框架，广泛应用于前端开发中。
它提供了一种简单而灵活的方式来构建交互性强的用户界面。
在Vue.js 中，Switch语法是一种非常常用和强大的技术，用于处理条件渲染的问题。
Switch语法允许我们根据给定的值，展示不同的内容。
它可以替代繁琐的if-else语句，使代码更加简洁易懂。
下面我们将详细介绍Vue 的Switch语法及其用法。
一、基本语法Switch语法由Vue的v-switch指令实现。
它的基本语法如下：```html<div v-switch="expression"><template v-case="value1"><!-- 根据value1的值展示内容 --></template><template v-case="value2"><!-- 根据value2的值展示内容 --></template>...<template v-default><!-- 默认情况下展示的内容 --></template></div>```在上面的代码中，v-switch属性绑定了一个JavaScript表达式，用于决定当前展示哪一段内容。
v-case属性用于定义不同的情况，每个v-case的值与v-switch绑定的表达式的值进行匹配。
当匹配成功时，对应的内容将会被展示出来。
v-default指令则用于定义默认情况下的内容，即当没有任何匹配成功时，会展示其中的内容。
二、示例为了更好地理解Vue的Switch语法，我们来看一个具体的示例。
假设我们有一个商品详情页，我们希望根据商品的不同状态，展示不同的按钮。
首先，我们需要在Vue实例中定义一个变量来存储商品的状态，例如：```javascriptnew Vue({data: {status: '已售罄'}});```然后，在页面上使用Switch语法来根据商品状态展示不同的按钮：```html<div v-switch="status"><template v-case="'上架'"><button>立即购买</button></template><template v-case="'已售罄'"><button disabled>已售罄</button></template><template v-default><button>暂无操作</button></template></div>```在上述代码中，我们使用了v-switch指令将status与Switch绑定，根据status的值来判断展示哪个按钮。
vue学习文档
Vue学习文档1. vue是什么Vue是类似于一个JavaScript的一套框架。
比如Jquery.js核心：Vue的核心思想为数据驱动和组件化(以数据驱动模型)。
2. Vue使用2.1渲染案例1:<div id="app">{{ message }}</div>var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})说明:el:绑定的dom节点，作用的范围。
只有在这个div的盒子当中vue才会生效。
Data:数据{{}}:用来进行渲染数据内容2.2条件与循环使用2.2.1 v-ifV-if：用来做条件控制<div id="app-3"><p v-if="seen">现在你看到我了</p></div>var app3 = new Vue({el: '#app-3',data: {seen: true}})Seen:true就进行数据渲染Seen:false 就不会显示输出内容注意:v-if会删除dom节点,删除删除完后需要重新加载应用场景:对应显示和隐藏频繁的场景,建议使用v-show来进行操作(频繁删除会消耗性能)。
2.2.2 v-showV-show：跟v-if功能是一样的，但是不会删除掉dom节点，只是进行了一个显示和隐藏的切换应用场景:频繁使用进行切换选择v-show案例:<div id="app-3"><p v-show="seen">现在你看到我了</p></div>var app3 = new Vue({el: '#app-3',data: {seen: true}})说明:v-show也是通过true/false来进行控制显示和隐藏的2.2.3 v-forV-for：用来将多个元素进行遍历案例:<div id="app-4"><ol><li v-for="todo in todos">{{ todo.text }}</li></ol></div>var app4 = new Vue({el: '#app-4',data: {todos: [{ text: '学习 JavaScript' },{ text: '学习 Vue' },{ text: '整个牛项目' }]}})输出结果:2.3交互事件使用现在我们想用一个点击的事件,那应该怎么写呢？为了让用户和你的应用进行交互，我们可以用v-on指令添加一个事件监听器,来进行事件处理。
vue3必背100个知识
vue3必背100个知识Vue.js3是一个流行的JavaScript框架，用于构建用户界面。
以下是一些关于Vue.js 3的必背知识点，包括基本概念、指令、组件和其它重要方面：###基础概念1.Vue实例的创建和生命周期钩子。
2.数据绑定和插值表达式。
3.条件渲染和列表渲染。
4.事件处理和方法。
5.计算属性和侦听器。
6.Class和Style绑定。
7.表单输入绑定和双向数据绑定。
8.生命周期钩子函数的执行顺序。
###Vue指令9.v-if、v-else-if和v-else指令。
10.v-for指令的用法。
11.v-show指令的作用。
12.v-bind和缩写语法。
13.v-on和缩写语法。
14.v-model指令的使用。
15.v-pre、v-cloak和v-once指令。
###组件16.组件的创建和使用。
17.组件的Props传递。
18.组件的事件传递。
19.插槽的使用。
20.动态组件的实现。
21.组件的生命周期。
22.异步组件的加载。
23.组件的ref属性。
24.Vuex状态管理的基本使用。
###Vue3新特性position API的使用。
26.Teleport组件的作用。
27.新的响应式API（`reactive`、`ref`、`toRefs`）。
28.Setup函数的作用。
29.`defineProps`和`defineEmits`的使用。
###路由和导航30.Vue Router的基本使用。
31.路由参数的获取。
32.命名路由的使用。
33.编程式导航的实现。
34.路由导航守卫的理解。
###状态管理35.Vuex的基本概念。
36.State、Getters、Mutations和Actions的使用。
37.模块化的Vuex应用。
###HTTP请求38.使用Axios进行HTTP请求。
39.在Vue中使用Fetch API。
###过渡和动画40.过渡的基本使用。
41.列表过渡的实现。
42.动画的使用。
《Vue js 3移动应用开发实战》读书笔记思维导图PPT模板下载
第11章 实战项目：
012 响应式单页面管理系 统...
014
第13章 实战项目： Web App打包成...
随着前后端分离开发模式的出现，前端框架Vue、React、Angular相关生态的不断完善，移动设备的普及， 移动端Web App的开发成为主流，越来越多的大学逐步开设Web相关的课程。本书是一本为初学前端的学生量身定 制的移动端Web开发入门教材，适合对移动端Web开发了解不多、没有系统学过前端开发，但对前端编程感兴趣的 读者学习使用。本书分为13章，第1~2章主要介绍移动端Web技术的发展和移动端Web项目所需要的技术栈，包括 安装开发环境与调试代码等；第3~10章主要介绍各种技术栈及第三方库的基础语法和使用方法等，涉及的技术栈 及第三方库包括Vue、Vuex、Webpack、Vue Router、Node.js、Mock.js、Vant Weapp、axios等，并在每章中 都提供实战案例或Demo；第11~12章分别给出2个实战案例—响应式单页面管理系统TODO和移动电商Web App；第 13章介绍Web App转为移动App的方法。
内容简介
第1章 什么是移动端Web开发
1.1 移动互联网 Web技术的发展概
况
1.2 移动端Web、 PC Web、手机...
1.3 移动端Web 和HTML
1.4 环境搭建
1.6 Vue开发环 境搭建
1.5 实战：第一 个移动端Web页
面
1.7 本章小结
1.4.2 安装 Node.js和 http...
12.6 首 页实现
05
12.5 登 录页、注12.8 购物车页实 现
12.9 “我的”页 面实现
12.10 本章小结
vue学习心得
vue学习⼼得前⾔使⽤vue框架有⼀段时间了，这⾥总结⼀下⼼得，主要为新⼈提供学习vue⼀些经验⽅法和项⽬中⼀些解决思路。
⽂中谨代表个⼈观点，如有错误，欢迎指正。
环境搭建假设你已经通读vue官⽅⽂档（⽂档都没读⼀遍（⾄少），那不建议动⼿撸码），在⼤致了解vue是什么东西，有什么⽤，核⼼概念之后我们就可以开始着⼿学习vue。
⾸先搭建环境。
学习vue，我的建议是通过官⼿脚⼿架起步。
>>>Installation$ npm install -g vue-cli>>Usage$ vue init <template-name> <project-name>>>>>Example:$ vue init webpack my-project根据需要安装插件yes or no,⼀直回车，脚⼿架就⽣成了。
接下来剖析脚⼿架结构。
脚⼿架结构剖析再开始写项⽬之前，我们需要弄清什么地⽅写什么代码。
build⽂件夹webpack配置⽂件。
此处配置webpack规则。
整个项⽬是通过webpack⽀持的。
⽐如你要使⽤less，你需要在webapck规则⾥使⽤less。
src ⽂件夹撸码的地⽅～基本你所有的代码都在这⼀块完成。
####### assets⽂件夹存放web中引⽤的图⽚媒体资源。
####### components⽂件夹主要存放可复⽤组件，你可以在任意页⾯中复⽤这些组件。
####### router⽂件夹index.js 路由配置⽂件。
在此处配置各个页⾯的跳转引⽤关系。
####### APP.vue这⾥看⼀看做页⾯的根部。
我们可以在这个页⾯进⾏⼀些css reset 操作。
####### main.js根逻辑，页⾯加载⾸先会加载这份js⽂件。
static⽂件夹主要存放外部引⽤资源。
⽐如xxx.min.jsindex.htmlvue是spa应⽤，所以只有⼀个⼊⼝，也就是index⽂件，这⾥我们进⾏⼀些不可更改资源（⽐如某某库）的引⽤，和html页⾯meta 、title之类的设定。
uni-app学习笔记（一）-官方文档的学习路线
uni-app学习笔记（⼀）-官⽅⽂档的学习路线资料观看顺序（在⽐较中学习）： 5.与 7.观看。
8.看完uniapp官⽹的《》、《》（先看常⽤的）、《》（先⼤体了解）、《》、《路由（、）》《》、《》（包括案例页和HBuilderX中的模板项⽬） 9.然后就是刷⼏个+Vue官⽹的视频。
10.现在就可以上⼿⼤部分项⽬了，边做项⽬边学完《》、《》。
注意：uni-app 使⽤vue的语法+⼩程序的标签和API，HBuilder X创建项⽬中包含了⼤量可供学习或使⽤的模板框架。
⼀，uniapp⽬录结构┌─uniCloud 云空间⽬录，阿⾥云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）│─components 符合vue组件规范的uni-app组件⽬录│└─comp-a.vue 可复⽤的a组件├─hybrid App端存放本地html⽂件的⽬录，详见├─platforms 存放各平台专⽤页⾯的⽬录，详见├─pages 业务页⾯⽂件存放的⽬录│├─index││└─index.vue index页⾯│└─list│└─list.vue list页⾯├─static存放应⽤引⽤的本地静态资源（如图⽚、视频等）的⽬录，注意：静态资源只能存放于此,static⽬录下的⽂件均会被完整打包进去，且不会编译（es6代码不要放这⾥了，css和less/scss等⽂件建议放到⾃建的common⽂件夹下）。
⾮static⽬录下的⽂件（vue、js、css 等）只有被引⽤到才会被打包编译进去。
├─uni_modules 存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents 存放⼩程序组件的⽬录，详见├─main.js Vue初始化⼊⼝⽂件├─App.vue 应⽤配置，⽤来配置App全局样式以及监听应⽤⽣命周期├─manifest.json 配置应⽤名称、appid、logo、版本等打包信息，详见├─pages.json 配置页⾯路由、导航条、选项卡等页⾯类信息，详见└─uni.scss 这⾥是uni-app内置的常⽤样式变量⼆，使⽤到的⼯具 、（实时调试⽤，初步上⼿阶段⽐浏览器好⽤点）、、⼿机模拟器（、、）。
Vue学习笔记（三）计算属性和侦听属性
Vue学习笔记（三）计算属性和侦听属性1、计算属性（computed）（1）计算属性模板的设计初衷是为了处理简单的逻辑（即声明式逻辑），在模板中加⼊过多的逻辑会使模板难以阅读和维护<!DOCTYPE html><html><head><title>Demo</title><script src="https:///vue/dist/vue.js"></script></head><body><div id="app"><p>原始字符串：{{ message }}</p><!-- ⽐如说，在模板中对 message 进⾏复杂的字符串反转操作 --><p>反转字符串：{{ message.split('').reverse().join('') }}</p></div><script>var vm = new Vue({el: '#app',data: {message: 'hello'}})</script></body></html>这时，我们就应该考虑使⽤计算属性，以代替复杂的模板逻辑<!DOCTYPE html><html><head><title>Demo</title><script src="https:///vue/dist/vue.js"></script></head><body><div id="app"><p>原始字符串：{{ message }}</p><!-- 在模板中直接使⽤计算属性 --><p>反转字符串：{{ reversedMessage }}</p></div><script>var vm = new Vue({el: '#app',data: {message: 'hello'},// computed 是 Vue 实例的计算属性// 它可以是⼀个对象，其中每⼀项的键是计算属性的名称，值是计算属性对应的函数computed: {// 这⾥，我们声明计算属性 reversedMessage，⽤于储存反转之后的字符串// 所提供的函数默认作为计算属性的 getter 函数（事实上还可以提供 setter 函数）// 这⾥的计算属性 reversedMessage 依赖于 message// 也就是说，当 message 发⽣变化时，reversedMessage 会⾃动更新reversedMessage: function () {return this.message.split('').reverse().join('')}}})</script></body></html>（2）computed & methods不知道⼤家还记不记得，我们在之前的⽂章中有⼀个例⼦，使⽤ methods 实现反转字符串的效果<!DOCTYPE html><html><head><title>Demo</title><script src="https:///npm/vue"></script></head><body><div id="app"><p>原始字符串：{{ message }}</p><!-- 在模板中显⽰⽅法的返回结果 --><p>反转字符串：{{ reversedMessage() }}</p></div><script type="text/javascript">var vm = new Vue({el: '#app',data: {message: "Hello Vue"},methods: {// 定义⽅法 reversedMessage()，返回反转之后的字符串reversedMessage: function () {return this.message.split('').reverse().join('')}}})</script></body></html>可以看到，使⽤ computed 和 methods 实现的功能⼤体相同，但是它们的不同之处在于：1. computed 是属性调⽤，⽽ methods 是⽅法调⽤2. computed 是基于缓存，⽽ methods 不是对于计算属性⽽⾔，计算结果将会被缓存，如果某个依赖在该实例范畴之外，那么计算属性是不会被更新的但是对于⽅法⽽⾔，调⽤⽅法总会再次执⾏代码，我们可以从⼀个简单的例⼦看出它们之间的区别：<!DOCTYPE html><html><head><title>Demo</title><script src="https:///npm/vue"></script></head><body><div id="app"><!-- 注意，这⾥是属性调⽤ --><p>第⼀次调⽤ computed：{{ msg_in_computed }}</p><p>第⼆次调⽤ computed：{{ msg_in_computed }}</p><br/><!-- 注意，这⾥是⽅法调⽤ --><p>第⼀次调⽤ methods：{{ msg_in_methods() }}</p><p>第⼆次调⽤ methods：{{ msg_in_methods() }}</p></div><script>var cnt_for_computed = 0;var cnt_for_methods = 0;var vm = new Vue({el: '#app',computed: {// 定义计算属性 msg_in_computed，多次调⽤不会更新数据// 因为它的依赖 cnt_for_computed 是⾮响应式属性，不在实例范畴之内msg_in_computed: function () {cnt_for_computed += 1;return cnt_for_computed}},methods: {// 定义⽅法 msg_in_methods()，每次调⽤总会执⾏代码msg_in_methods: function () {cnt_for_methods += 1;return cnt_for_methods}}})</script></body></html><!-- 输出结果第⼀次调⽤ computed：1第⼆次调⽤ computed：1第⼀次调⽤ methods：1第⼆次调⽤ methods：2-->（3）getter & setter计算属性默认只有 getter 函数<!DOCTYPE html><html><head><title>Demo</title><script src="https:///npm/vue"></script></head><body><div id="app"><p>fullName: {{ fullName }}</p><p>firstName: {{ firstName }}</p><p>lastName: {{ lastName }}</p></div><script>var vm = new Vue({el: '#app',data: {firstName: 'Steve',lastName: 'Jobs'},computed: {// 若为计算属性提供⼀个函数，则该函数默认作为计算属性的 getter 函数 fullName: function () {return this.firstName + ' ' + stName}}})// 修改计算属性依赖的值时，会⾃动调⽤计算属性的 getter 函数vm.firstName = 'Stephen'</script></body></html><!-- 输出结果fullName: Stephen JobsfirstName: StephenlastName: Jobs-->但是，在需要的时候我们也可以提供⼀个 setter 函数<!DOCTYPE html><html><head><title>Demo</title><script src="https:///npm/vue"></script></head><body><div id="app"><p>fullName: {{ fullName }}</p><p>firstName: {{ firstName }}</p><p>lastName: {{ lastName }}</p></div><script>var vm = new Vue({el: '#app',data: {firstName: 'Steve',lastName: 'Jobs'},computed: {fullName: {// getter 函数get: function () {return this.firstName + ' ' + stName},// setter 函数set: function (newValue) {var names = newValue.split(' ')this.firstName = names[0]stName = names[names.length - 1]}}}})// 修改计算属性的值时，会⾃动调⽤计算属性的 setter 函数vm.fullName = 'Tim Cook'</script></body></html><!-- 输出结果fullName: Tim CookfirstName: TimlastName: Cook-->2、侦听属性（watch）侦听属性是⼀个对象，键是需要观察的表达式，值是对应的回调函数或者是包含选项的对象对应的回调函数<!DOCTYPE html><html><head><title>Demo</title><script src="https:///npm/vue"></script></head><body><div id="app"><p>计数器: {{ counter }}</p><button @click="counter++">点我</button></div><script type="text/javascript">var vm = new Vue({el: '#app',data: {counter: 1},watch: {// 当 counter 发⽣变化时，会⾃动调⽤其对应的回调函数打印⼀条信息counter: function(val, oldVal){alert('计数器从 ' + val + ' 变为 ' + oldVal);}}});</script></body></html>包含选项的对象var vm = new Vue({el: '#app',data: {counter: 1},watch: {// 使⽤对象可以为监听属性添加更多的配置信息counter: {handler: function (val, oldVal) {alert('计数器从 ' + val + ' 变为 ' + oldVal);},deep: true, // 当监听对象的属性发⽣变化时（不管嵌套的深度），触发回调immediate: true // 在侦听开始之后，⽴即触发回调},}});【阅读更多 Vue 系列⽂章，请看】。
Vue js核心技术解析与uni app跨平台实战开发
1
13.5 v-for 渲染数据
2
13.6 uniapp生命周期
3 13.7 uni-
app发送HTTP 请求
4
13.8跨端兼容
5
13.9页面跳转
13.1.1创建uni-app项目 13.1.2 uni-app目录结构 13.1.3 uni-app运行机制
13.2.1 view组件 13.2.2 text组件 13.2.3 image组件
Vue.js核心技术解析与uni-app跨平 台实战开发
读书笔记模板
01 思维导图
03 读书笔记 05 作者介绍
目录
02 内容摘要 04 目录分析 06 精彩摘录
思维导图
本书关键字分析思维导图
实战
跨平台 核心技术
函数 创建
企业
项目
跨平台
实战
项目 数据
开发
核心技术
第章
事件
组件
生命周期
案例页面内容Fra bibliotek要1.3创建Vue实例对 象，详解MVVM
1.4详解插值表达式
1
1.5 Vue基础 指令
2
1.6事件修饰 符
3
1.7双向数据 绑定
4
1.8 v-for指 令
5
1.9学生管理 案例
1.1.1当前流行的前端框架 1.1.2为什么要学习Vue.js 1.核心理念 1.1.4框架和库的区别
1.5.1 v-cloak指令 1.5.2 v-text指令 1.5.3 v-html指令 1.5.4 v-bind指令 1.5.5 v-on指令
10.7.1 vue-cli创建项目站点 10.7.2 Vuex修改登录状态
11.2首页开发
Vue-eBookReader学习笔记（阅读器解析和渲染部分）
Vue-eBookReader学习笔记（阅读器解析和渲染部分）1、阅读器解析和渲染1.1 动态路由的设置 观察成品可知，在地址栏会出现书名、分类的信息，⽽且可以在地址栏更改信息得到不同的书，这就利⽤了动态路由的技术。
1.1.1 现在先实现，在地址栏输⼊的值直接显⽰到页⾯的效果。
在路由index.js⽂件中的ebook路由下，添加children属性来存放动态路由，children是⼀个数组，每个元素是对象，⾥⾯包含了⼀个动态路由：{path: '/ebook',component: () => import('../views/ebook/index.vue'),children: [{//这⾥的冒号代表后⾯是参数，在EbookReader组件内部可以通过 $route.params.fileName来访问到path: ':fileName',component: () => import('../components/ebook/EbookReader')}]}1.1.2 构造书本地址简单功能实现完毕之后，来写：在地址栏输⼊地址+分类+|+书名可以访问到电⼦书，其实也就是在刚刚基础上将EbookReader组件⾥的打印改为字符串拼接；字符串输⼊样例：http://localhost:8080/#/ebook/History|2013_Book_FungalDiseaseInBritainAndTheUnmounted () {const fileName = this.$route.params.fileName.split('|').join('/')const baseUrl = '192.168.1.112:8082/epub/'console.log(`${baseUrl}${fileName}.epub`)}这样就从nginx上获取到了想要的资源，有了书本的地址就可以开始构造Book对象将书本地址放到vuex中存储，这时由于后来会有很多地⽅都要⽤到这个值，同样使⽤getter和mapGetters来实现简便取值；1.2 书本构造开始1.2.1 将书本渲染到dom上this.book = new Epub(url)创建新book对象获取rendition对象，主要⽤于电⼦书的渲染this.rendition = this.book.renderTo('read', {width: window.innerWidth,height: window.innerHeight//这⾥课程⾥⽼师说要加，但是加上之后发现渲染出来的元素宽度为0，去掉就好了也不知道为什么// method: 'default'})this.rendition.display()展⽰出电⼦书来1.2.2 实现左滑右滑翻页效果这⾥左滑右滑均不⽀持长按，且距离不能太短以与点击事件区别出来this.rendition.on('事件名', '事件处理函数')⽤来给book对象绑定事件this.rendition.on('touchstart', event => {this.touchStartX = event.changedTouches[0].clientXthis.touchStartTime = event.timeStamp})this.rendition.on('touchend', event => {const offsetX = event.changedTouches[0].clientX - this.touchStartXconst time = event.timeStamp - this.touchStartTimeif (time < 500 && offsetX < -40) {this.nextPage()} else if (time < 500 && offsetX > 40) {} else {this.toggleTitleAndMenu()}event.passive = falseevent.stopPropagation() //阻⽌事件传播})上⾯这段代码是获取到滑动的起始和结束的位置与时间，通过简单的运算来判断滑动的⽅向以及时间这⾥⽤的是event.passive = false，⽽不是⽼师的event.preventDefault()是因为，滑动的时候会报错，设置passive为false也可以阻⽌默认⾏为1.2.3 标题栏和菜单栏部分布局和样式都是⽤之前的代码，稍微改动即可，改完之后⼤概样⼦以及过渡动画也完成了这⾥需要滑动页⾯的时候标题栏菜单栏都要隐藏，要增加⼀个menuVisible的state来决定是否显⽰这两样东西，依然是⽤mapGatters 来简化1.2.4 ⽤mixin技术来简化代码1.2.4.1 代码复⽤发现在每个组件⾥都⽤到了以下代码，代码重复度太⼤：import { mapGetters, mapActions } from 'vuex'export const ebookMixin = {computed: {...mapGetters(['menuVisible','fileName'])}}所以将这段代码封装到utils/mixin.js⽂件中，再在要使⽤的组件⾥的script标签⾥⽤import { ebookMixin } from '../../utils/mixin'，原理和使⽤mapGetters⼀样差不多再加上⼀个mixin的属性：mixins: [ebookMixin]1.2.4.2 vuex中methods的调⽤⽅法简化之前利⽤了mapGetters和getter计数来让组件⾥引⽤state的数据简便了不少，其实vuex中同样可以使⽤类似的及时让外⾯的组件调⽤⽅法⽐较简单，本来是this.$store.dispatch('⽅法名','参数')，现在可以变为this.⽅法名('参数')和getter差不多，在vuex的index.js⽂件中加上actions属性，同时在modules/actions⽂件⾥将⽅法都封装进去并且export出来，也就是将⽅法都放在⼀起⽅便管理注意这⾥和上⾯的getters有点不⼀样，是直接把book⾥的actions全拿出来放到actions.js⽂件中，接着把book⾥原来的actions删掉引⽤同样和mapGatters差不多，在组件⾥import { mapActions } from 'vuex'，但这是⽅法，所以...mapActions([''])要写在methods⾥哦（同样这⼀段也可以写在mixin⾥⽅便管理）1.2.5 字号设置1.2.5.1 布局部分字体的菜单栏部分会多出上⾯那⼀截，主要的实现思路是：字体进度条左边是最⼩的字体，右边是最⼤的字体将菜单栏横着主要分成七个部分（这个数量是由总共有多少可以字号设置来决定的），每个部分分为左右两个部分显⽰⼀个边框（视觉上就是⼀条直线）⼏个部分由中间的⼩点隔开，其实每个⼩点的地⽅都是⼀个⼤点，但只有当选中某⼀个部分（字体）时，那个地⽅的⼤点才会显⽰出来表⽰选中将fontSizeList这种静态数据都放在统⼀的⽂件下管理，这⾥放在utils⽂件夹下的book.js中⽤import { FONT_SIZE_LIST } from '../../utils/book'引⼊进来再在数据⾥定义好⾃⼰的数据 fontSizeList值为FONT_SIZE_LISTexport const FONT_SIZE_LIST = [{ fontSize: 12 },{ fontSize: 16 },{ fontSize: 18 },{ fontSize: 20 },{ fontSize: 22 },{ fontSize: 24 }]每个⼩圆点有个字体，全局有defaultFontSize为当前的字体，每次触发点击事件后通过setFontSize来修改默认字体注意点：当字体设置⾯板出来之后，设置⾯板的阴影要隐藏设置⾯板隐藏，下⼀次再出来的时候字体设置⾯板应该是不出现的1.2.6 字体部分1.2.6.1 布局字体和字号在同⼀个⾯板上，上⾯是字号条占⽐2/3，下⾯是字号 1/3，其中字号设置点开有弹窗效果占⽐就⽤flex布局，垂直分布，⼀个flex为2⼀个为11.2.6.2 字号设置弹窗弹窗分为上下两个部分，上⾯是标题（后⾯⽀持中英切换），下⾯是字体列表先对⼤致布局进⾏设置，再写css，就不再多说，但是都⽤弹性布局（⾮常好）下⾯的字体列表⽤v-for循环显⽰完之后，选中的那个要单独变颜⾊，⽤:class="{'selected': isSelected(item)}"来控制加不加上那个selected的类1.2.6.3 字体设置（⽐字号设置复杂）有⼀步的设置⽅法和字号设置差不多，this.currentBook.rendition.themes.font(font)，但这⼀步之后字体并没有发⽣变化epubjs的渲染是通过iframe来实现的，iframe中才是真实的阅读器的dom，要设置字体必须在这个dom⾥⾯设置，所以直接写是没⽤的（⾥⾯是⼀个独⽴的dom）利⽤epubjs的钩⼦函数：// content代表iframe⾥的dom已经加载完毕可以访问// contents是管理资源⽂件// addStylesheet是⼿动添加style样式的函数this.rendition.hooks.content.register(contents => {Promise.all([contents.addStylesheet('http://10.69.198.212:8082/fonts/daysOne.css'),contents.addStylesheet('http://10.69.198.212:8082/fonts/cabin.css'),contents.addStylesheet('http://10.69.198.212:8082/fonts/montserrat.css'),contents.addStylesheet('http://10.69.198.212:8082/fonts/tangerine.css').then(() => {})])})观察epubjs中contents的addStylesheet函数源码，发现它将接收的参数拼成⼀个url，利⽤link标签引⼊css，所以要接收url的css，因此就将字体⽂件放⼊nginx服务器上，传⼊的就是nginx服务器下的那个url上⾯的register函数返回是⼀个promise对象，所以可以利⽤Promise.all这个函数来对那些promise对象进⾏处理，就可以在全部注册完之后⼲点什么了环境变量http://10.69.198.212:8082这个⽹址很可能在⽣产环境和开发环境是不⼀样的，所以在这⾥不能直接写死⽹址，⽽是要添加环境变量在项⽬根⽬录下添加⽂件 .env.development，在⾥⾯写上要替换的⽹址只有以VUE_APP_开头的变量会被webpack.DefinePlugin静态嵌⼊到客户端侧的包中// .env.developmentVUE_APP_RES_URL=http://10.69.198.212:8082// 替换之后contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/cabin.css`),环境变量是在服务器启动的时候加⼊，所以这⾥要重启服务器1.2.7 字体和字号设置离线缓存⼀般会有要求在客户下⼀次进⼊页⾯的时候，设置仍然保持上⼀次退出的样⼦，所以这⾥⽤到了localStorage来实现先安装cnpm i --save web-storage-cache在utils⽂件夹下创建localStorage.js⽂件⽤来封装localStorage的操作// 基本操作import Storage from 'web-storage-cache'const localStorage = new Storage()export function setLocalStorage (key, value) {return localStorage.set(key, value)}export function getLocalStorage (key) {return localStorage.get(key)}export function removeLocalStorage (key) {return localStorage.delete(key)}export function clearLocalStorage () {localStorage.clear()}下⾯的具体操作代码，每本书都在localStorage⾥有⾃⼰的单独设置localStorage⾥键是${fileName}-info，值是⼀个book对象，以后每次要加新的设置就直接在book对象中加就可以了// 具体操作代码export function setBookObject (fileName, key, value) {let book = getLocalStorage(`${fileName}-info`)if (!book) {book = {}}book[key] = valuesetLocalStorage(`${fileName}-info`, book)}export function getBookObject (fileName, key) {const book = getLocalStorage(`${fileName}-info`)if (book) {return book[key]} else {return null}}export function getFontFamily (fileName) {return getBookObject(fileName, 'fontFamily')}export function saveFontFamily (fileName, font) {setBookObject(fileName, 'fontFamily', font)}加完这些之后要设置，每次换完字体就要saveFontFamily，以及⼀开始渲染的时候也要设置，开始的时候利⽤rendition.display返回的是⼀个promise对象来进⾏操作this.rendition.display().then(() => {const font = getFontFamily(this.fileName)if (font) {this.currentBook.rendition.themes.font(font)this.setDefaultFontFamily(font)} else {saveFontFamily(this.fileName, 'Default')}})其余的设置也是差不多的操作1.2.8 语⾔国际化⾸先准备好了两个不同语⾔的⽂件, ⾥⾯准备好了各个地⽅需要的⽂字利⽤ VueI18N插件安装cnpm i --save vue-i18n在src⽬录下新建lang⽂件夹来管理语⾔lang⽂件夹下的index.js⽂件⾥使⽤插件, 同时注意要在main.js中引⼊这个插件⽂件并注册, 不然⽆法使⽤同样利⽤localStorage来存储当前的语⾔, 以备下⼀次打开时需要1.2.9 主题设置这⾥主题依旧是静态资源⽂件, 所以在utils下的book.js中仍然要加上theme相关信息主题的名字也⽤到了国际化语⾔, 所以book.js中也要使⽤插件vuei18n, 这⾥就有问题了发现i18n.t()函数使⽤的时候报错i18n is undefied, 明明i18n已经在main.js的根组件中注册好了, 为什么还是使⽤不了?这是由于book.js中代码执⾏的时候, i18n插件还没被注册完毕. 也没什么好的解决⽅法, 就在开头引⼊i18n插件吧import i18n from'../lang'可以看看这篇⽂章设置主题要先在eBook对象中注册主题分别需要名字以及对应的样式, 这⾥由于在EBook Reader组件以及EbookThemeSetting组件中都⽤到了themeList, 所以也将theme List的那个混⼊过程加⼊到mixin中, 这样只要引⽤了mixin就都能取到themeList其余就和字体字号⼀样, initTheme⾥判断默认主题什么什么的, 还有localStorage的存储~⼩bug, 发现每个主题只能切换⼀次就不能再换回来了, 所以这⾥把epubjs的版本换成0.3.71 就⾏了1.2.10 全局主题设置主要的思想是动态添加css⽂件, 我们知道, css⽂件的添加是通过link标签实现的, 所以这⾥也就是动态添加link标签来实现 ( 这个函数写在book.js⽂件中并且export出去, 要使⽤的地⽅就引⽤ )export function addClass (url) {const link = document.createElement('link')link.setAttribute('rel', 'stylesheet')link.setAttribute('href', url)link.setAttribute('type', 'text/css')document.querySelector('head').appendChild(link)}这⾥的link标签需要url,我们将主题⽂件放到nginx服务器下, (注意这⾥的地址还是要使⽤环境变量, ~包括之前的book的地址也要). 每次切换主题的时候就调⽤addClass这个函数每次选择切换⼀次主题, 不仅电⼦书的主题要切换全局主题也要切换, 写另外⼀个函数来根据不同的电⼦书主题同步切换到全局主题// 这个函数在EbookSettingTheme和EbookReader中都要⽤到,所以写在mixin中供全局调⽤initGlobalStyle () {switch (this.defaultTheme) {case 'Default': addClass(`${process.env.VUE_APP_RES_URL}/theme/theme_default.css`)breakcase 'Gold': addClass(`${process.env.VUE_APP_RES_URL}/theme/theme_gold.css`)breakcase 'Eye': addClass(`${process.env.VUE_APP_RES_URL}/theme/theme_eye.css`)breakcase 'Night': addClass(`${process.env.VUE_APP_RES_URL}/theme/theme_night.css`)breakdefault: addClass(`${process.env.VUE_APP_RES_URL}/theme/theme_default.css`)}}但是这也下去会有⼀个问题, 每切换⼀次主题就多添加⼀个link标签, 加重了渲染的负担, 所以同时还要想办法移除之前添加的link标签。
vue学习笔记初识vue——使用HTML模板
在Vue.js中，这种模板被称为HTML模板，而使用template配置项 书写的模板，被称为字符串模板。 工作原理 当Vue.js发现你提供的选项中没有template属性时，将提取el属性所 指定的DOM节点的outerHTML内容作为模板内容。这类似于： var vm = new Vue({ el:'#app', template: document.querySelector('#app').outerHTML })
当vuejs发现你提供的选项中没有template属性时将提取el属性所指定的dom节点的outerhtml内容作为模板内容
vue学习笔记初识 vue——使用 HTML模板
在创建Vue实例时，如果声明了el配置项，那么你也可以省略template 选项。这时候，Vue.js将提取锚点元素的HTML内容，做为模板。 我们可以使用单一的el配置项来创建Vue实例：
vue3源码解析打造自己的vue3框架 笔记
vue3源码解析打造自己的vue3框架笔记摘要：1.Vue3 简介与背景2.Vue3 核心特性与改进3.Vue3 框架搭建步骤4.打造自己的Vue3 框架a.创建组件b.组件生命周期管理c.路由搭建d.状态管理e.服务端渲染5.总结与展望正文：一、Vue3 简介与背景Vue3 是Vue.js 的最新版本，由Vue.js 创始人尤雨溪亲自操刀开发。
Vue3 继承了Vue2 的优秀特性，并在性能、易用性和生态系统等方面进行了大幅度的优化和改进。
在这个笔记中，我们将深入了解Vue3 的核心特性，并学习如何打造自己的Vue3 框架。
二、Vue3 核心特性与改进1.性能提升：Vue3 采用了全新的虚拟DOM，提高了渲染性能；同时，Vue3 更注重代码压缩和优化，使得bundle 体积更小，加载速度更快。
2.组合式API：Vue3 引入了组合式API，这是一种更灵活、更高效的代码组织方式。
通过组合式API，我们可以轻松地实现组件间的逻辑复用，降低代码冗余。
3.改进的TypeScript 支持：Vue3 对TypeScript 的支持进行了大幅度的优化，使得开发者在编写TypeScript 代码时能更好地体验到Vue3 的便捷性。
4.响应式系统升级：Vue3 响应式系统进行了升级，提高了性能和可维护性。
在Vue3 中，我们不再需要使用`data-*` 属性来定义响应式数据，而是使用`ref` 和`reactive` 函数。
5.更好的错误提示：Vue3 提供了更详细的错误提示，帮助开发者快速定位和解决问题。
三、Vue3 框架搭建步骤1.安装Vue3：使用npm 或yarn 安装Vue3，然后配置项目依赖。
2.创建项目：使用Vue CLI 创建一个Vue3 项目，或手动创建一个基于Vue3 的项目结构。
3.配置项目：配置项目的基本设置，如路由、状态管理、编译器选项等。
4.编写组件：使用Vue3 编写组件，体验全新的组合式API 和响应式系统。
Vue学习总结(更新中)
Vue学习总结（更新中）Vue是一款以数据驱动、组件化开发思想为核心的JavaScript框架，它由尤雨溪先生在2024年开发并发布，迅速赢得了广大开发者的认可和喜爱。
在我学习Vue的过程中，我深深感受到了它的强大和灵活，下面是我对Vue学习的总结。
首先，Vue的核心是数据驱动。
在Vue中，我们只需要关注数据，将数据绑定到HTML的模板中，Vue会自动帮我们更新DOM，实现了数据和视图的同步。
这种数据驱动的开发方式极大地提高了开发效率，减少了手动操作DOM的复杂性，使我们能够专注于数据和业务逻辑的处理。
其次，Vue的开发思想是组件化。
Vue将页面拆分成一个个独立、可复用、可测试的组件，每个组件都有自己的数据和模板，并通过props和events来实现组件间的通信。
组件化开发让我们能够更好地组织代码和管理状态，提高代码的可维护性和可复用性。
Vue提供了丰富的指令和功能，使我们能够更好地处理交互和动态效果。
比如v-if、v-for、v-bind、v-on等指令，允许我们根据条件渲染DOM、循环生成DOM、绑定属性和事件等。
Vue还提供了计算属性和监听器，可以实时响应数据变化，动态更新页面。
在Vue的学习过程中，我也了解到了一些Vue的特点和优势。
首先，Vue采用MVVM的架构模式，通过数据绑定实现了视图和模型的解耦，使代码结构清晰，易于理解和维护。
其次，Vue具有高性能的虚拟DOM机制，能够高效地比较和更新页面，提升了页面渲染的速度和效果。
另外，Vue还支持服务端渲染，提供了更好的SEO效果和首屏加载速度。
在实际项目中，我也运用了Vue进行了一些小项目的开发。
在这个过程中，我深刻体会到了Vue的简洁和易用。
Vue提供了详细的文档和丰富的实例，让我们能够快速上手，并且它有一个活跃的社区，我们可以在社区中找到很多解决方案和工具。
同时，Vue还与其他工具和插件配套使用，比如Vue Router、Vuex、Axios等，使我们能够构建完整的Web应用。
vue内置组件transition简单原理图文详解（小结）
vue内置组件transition简单原理图⽂详解（⼩结）基本概念Vue 在插⼊、更新或者移除 DOM 时，提供多种不同⽅式的应⽤过渡效果在 CSS 过渡和动画中⾃动应⽤ class可以配合使⽤第三⽅ CSS 动画库，如 Animate.css在过渡钩⼦函数中使⽤ JavaScript 直接操作 DOM可以配合使⽤第三⽅ JavaScript 动画库，如 Velocity.js简单⽤法⽤v-if/v-show控制显⽰隐藏，使⽤transition 组件控制其变化过程⼀个页⾯⼦组件 router-view 的消失隐藏，使⽤transition 组件控制其变化过程<template>// ⼦组件<transition name="fade1"><router-view></router-view></transition>// if/show控制<transition name="fade2"><div v-show="isTage"></div></transition></template>类名介绍1. v-enter：定义进⼊过渡的开始状态。
在元素被插⼊之前⽣效，在元素被插⼊之后的下⼀帧移除。
2. v-enter-active：定义进⼊过渡⽣效时的状态。
在整个进⼊过渡的阶段中应⽤，在元素被插⼊之前⽣效，在过渡/动画完成之后移除。
这个类可以被⽤来定义进⼊过渡的过程时间，延迟和曲线函数。
3. v-enter-to : 2.1.8版及以上定义进⼊过渡的结束状态。
在元素被插⼊之后下⼀帧⽣效 (与此同时v-enter被移除)，在过渡/动画完成之后移除。
4. v-leave : 定义离开过渡的开始状态。
在离开过渡被触发时⽴刻⽣效，下⼀帧被移除。
Vue插值、表达式、分隔符、指令知识小结
Vue插值、表达式、分隔符、指令知识⼩结最近打算重温⼀遍vue的知识，正好总结⼀份笔记。
插值基本⽤法<span>Text:{{text}}</span><span v-text="text"></span> 这个属于指令<li data-id="{{id}}"></li>有时候只需要渲染⼀次数据，后续数据变化不再关⼼，可以通过“*”实现<span>Text:{{*text}}</span>如果是html⽚段，可以这样表⽰<span v-html="text"></span> 这个属于指令<span>Text:{{{text}}}</span>表达式表达式是各种数值、变量、运算符的综合体{{ cents/100 }}{{ true?1:0 }}{{ example.split(",") }}⽆效⽰例{{ var logo= 'DDFE' }}{{ if(true) return 'DDFE' }}添加过滤器，允许过滤器串联，还⽀持传⼊参数{{ example | toUpperCase }}{{ example | filterA | filterB }}{{ example | filter a b }}分隔符Vue.config是⼀个对象，包含了Vue.js的所有全局配置，可以在Vue实例化前修改其中的属性delimitersVue.config.delimiters = ["<%","%>"];如果修改了默认的分隔符，则⽂本插值中的语法{{example}}变成<%example%>unsafeDelimitersVue.config.unsafeDelimiters = ["<$","$>"];如果修改了默认的HTML插值分隔符，则HTML插值的语法由{{example}}变成<example exampleexample>指令v-if 可以根据表达式的值在DOM中⽣成或移除⼀个元素。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
.prevent
.capture
.self
.once
.passive当然这些.都是click下面的v-on：click.stop
Байду номын сангаас
表单数据绑定（就这些input，textarea之类的用上之后在这上面输出的东西也会在下一行你写的{{message}}里面输出）
v-model会与表单<input>,<textarea>,<select>元素创建双向数据绑定
构建步骤。但是这些都能通过单文件组件完成
当然要先安装
安装npm 由于网络原因安装cnpm （npm install -g cnpm --registry=https：//）
安装vue-cli（cnpm install -g @vue/cli） 安装webpack(cnpm install -g webpack)这个是JavaScript打包器
利用v-componment注册的组件是全局组件，这个组件在你的JavaScript里都能用如果其他的
不想用无疑增大了JavaScript的空间，所以可以在new Vue里写
components：{
test：{。。。}
}这样构建了一个局部组件test
单文件组件
使用ponment来创建全局组件在复杂的项目中会有缺点：全局定义、字符串模板、不支持css、没有
2、动态赋值（特性）
v-bind:id名="变量值（可以是颜色啊什么的这个地方很灵活面很广）" 后面vue的data：{变量值：'red'}对应
可以简写为 :id=""
3、使用JavaScrip表达式
{{number+1}} ---运算的number是可以修改的data值
{{ok? 'yes' :'No'}} ---条件表达ok是data值正确返回yes 错误返回no
deactivated(keep-alive组件停用时调用)
beforeDestroy
destroyed
errorCaptured(组件错误)
模板语法-插值
1、文本
双大括号文本插值，{{msg}}Vue下修改可以修改插值
v-once:插值只能改一次
v-html可以输出真正的html代码而不是双大括号那样改值得文本
})
methods:{
clickfun:function(){
this.count++
this.$emit('clicknow',this.count)}
}
</script>
ponent()是创建为组件button-counter是组件名data后面函数是方法，
template是模板这个组件的模板，建好组件之后就能用这个组件了直接在前面div里加
main.js--vue初始化入口文件
App.vue---应用配置，用来配置app全局样式以及监听 应用生命周期
manifest.json--配置应用名称、appid、logo、版本等打包信息
pages.json--配置页面路由、导航条、选项卡等页面类信息
创建var vm =new Vue(){
el:
data:
...
}
生命周期（各个阶段）:
beforeCreate后加:function()引用函数下都一样
created
beforeMount
mounted
beforeUpdate
updated
activated(keep-alive组件激活时调用)
{{item.message}}{{其他条件}}
data:{
item:[
{message:''}
{message:''}
]
为了以后的维护更新我们最好为每一项提供一个唯一的key值它的值要是唯一的一个量
用v-bind:key=""
v-for也可以遍历一个对象的属性
v-for="value,key in dbb"
即<button v-on：click="lala">lala</button>(没有任何方法所以这里我们构建函数)
在后面的Vue里（
{
新添methods：{
lala：function（可以有多个参数）//来引用函数
alert（hi）；
}
}
）
当然还有很多时间修饰符如dbclick双击
methods是可以构建函数方法引用引用之后count自加1并运行下一句
$emit的含义是在调用clickfun函数之后继续调用clicknow函数并且count为他可携带的参数
至于后面的函数可以在new Vue里写
<button-counter></button-counter>就好
组件注册
安装完成后在cmd下输入vue ui进入cli可视化界面可以在这里面直接创建项目，创建完成后关闭
在你创建的路径上把新建的项目拖拽到hbuilderx上
里面的app.vue是文件的入口文件完成对组件的引入工作
import组件名 from这个组件的路径
可以引用这个组件
src下的components下的HelloWord.vue就是单文件组件当然也可以在component目录下
就是，<input v-model="message">ada</input>
{{message}}
组件基础
把经常重复的功能封装为组件<script>
ponent('button-counter',{
data:function(){...}
template:<button v-on:click="clickfun">lala</button>
条件渲染v-if（只有在返回值为真时才会被渲染不为真时不渲染）v-show（不管初始条件是什么，元素都会被渲染只不过显示不显示什么的就看你怎么设置了）
列表渲染v-for
基于一个数组来渲染一个列表需要用item in items的特殊用法
即v-for="item，（其他条件） in items" 下文讲的key值在这里添加
新建我们自己的单文件组件。
免终端开发vue应用
后面的开发中基于vue的html商业开发不会使用vue内嵌的方式而是基于vue.cli的方式开发
是要自己创建的单独的vue项目
pages--业务页面文件存放的目录pages下的index.vue index页面
static--存放应用引用静态资源（图片视频）注：静态资源只能放于此
{{key}}:{{value}}}
data:
dbb:{
title：wiliam sherlock scott homes
anthor：aerlan Smith
}
事件绑定v-on：比如click点击事件等触发时会产生相应的变化
但直接把JavaScript代码写在v-on上是不可行的所以v-on可以接收一个需要调用的方法名称
{{message.split('').reverse().join('')}} ----是将message值拆分倒着排列再组合就是倒叙的函数
模板语法-指令
v-bind:style={styleObject}
data：{
styleObject{
color：。。
。。。
}
}可以动态的绑定style