VUE.js

基本命令
v-if || v-for : 条件与循环
v-model: 为页面输入框进行数据双向绑定
v-on || @click : 为页面元素绑定各种事件
v-bind:class || :class ：给页面标签的一个属性"绑定"一个属性class 然后设置
v-if || v-else-if || v-else: if else语句
v-show : 显示或隐藏但dom元素还存在其他的是虚拟dom所以false会不存在
.lazy || .number || .trim： ||multiple 分别对应 [懒] [数值] [字符串两端空格删除] [可以多选]
v-once 只会展示第一次更新的数据以后不会更改
v-html

把data里的url变量作为html展示出来
v-text

data里的数据作为文本展示
v-pre

把变量原封不动的展示出来

基本形式
let myApp = new Vue ({
el: '#myApp',
data: {
数据与变量或函数(组件当中data必须是一个函数)
},
methods: {
if 事件函数和各种方法函数
},
filters: {
过滤器方法格式化变量内容的输出
},
computed: {
计算属性方法,
方法名: {
get: function () {
设置计算属性
},
set: function () {
设置计算属性
}
}
},
watch: {
观察属性方法
},
components : {
局部组件的注册
},
beforeCreate: function(){
各种生命周期钩子函数
}
})

组件内容：

v-on 侦听组件事件当组件触发事件后进行事件处理用在父组件当中
$emit 触发提交事件并将数据提交给事件侦听者用在子组件当中
如果想在表格里使用组件需要使用is属性

Vue.component('组件标签名',{
props: {
name:{ //组件创建设置属性
//组件参数的验证方法
type: String,
required: true, // required必须输入项
validator: function(){}, //validator验证器
default: function(){} // 默认
}
},
template:'组件模板如

今天下雨出不去啦干什么呢？看Youtube吧！

>'
//是父组件与子组件的通讯方式可以将父组件的内容显示在子组件当中

小前：

//组合slot插槽
,
data: function () {
组件数据函数
},
computed: {
组件计算函数
}
})

1、引用vue文件：
2、声明一个带有id的div
3、在script中引用带有id 的div 初始化一个对象 el选择对象 data是数据 message是变量
4、data数据这里在实际里都是在服务器取得然后再渲染到页面当中

1、开始

const myApp = new Vue({
el: '#myApp',
data: {
message: Hello Vue.js Wrold!
}
})

2、条件与循环 v-if v-for

游戏列表

2017最新发售

//如果这个是true就显示 false就隐藏

{{game.title}} / {{game.price}}元

3、处理用户输入 v-model

为页面输入框进行数据双向绑定：
input
select
textarea
components 组件

这里用v-model绑定了一个input输入框在输入框输入的值会保存在data的mygame值里会动态显示在p标签上

v-model

你最喜欢的游戏是:{{mygame}}

4、按钮事件 v-on @click

为页面元素绑定各种事件(keydown,keyup,click,dbclick,load,etd)

methods定义各种方法和data平级也是vue的保留词

这里默认值超级马里奥当点击下面的按钮时 methods里的方法执行 this指向当前myApp实例
传入一个参数把这个参数赋值给 this.mygame值里 "btnClick('我的世界')" 我的世界是传入的值
当我点击哪个哪个的值就能显示在页面上

您最喜欢的游戏是：{{mygame}}

5、组件 component

定义页面的局部区域块完成单独的页面小功能

//定义1geme-item组件等于创建了一个html组件表标签
2props属性这里games每次循环后的item 赋值绑定给了game属性(v-bind:game="item")
3template是这个组件里的内容也就是网页该显示什么内容

6、过滤器 filters关键字格式化变量内容的输出

比如日期格式化字母大小写数字再计算等等
如有一个日期[2019,06,10] 从数据库读取出来这个数据然后是加年月日还是以/为分隔叫作格式化内容
数据是0.3 表现出来的形式是30% 这就是数形分离非常经典的mvc 设计方法

现在的学习进度是{{num}}({{num | topercentage}}).

7、计算属性 computed关键词

处理元数据(数据库中取出的还没加工的数据) 便于进行二次利用 (比如：消费税自动计算功能)

今年3月3日发售的任天堂新一代主机的价格是：{{price}}日元,含税价格为：{{priceInTax}}日元,折合人民币为：{{priceChinaRMB}}元

8、观察-属性 watch关键词 angular而来

监视变量当这个属性或者是变量改变的时候的相应处理如这个值加了1000日元后
类似事件当点击时做什么这个是当变量改变时做什么
function(newVal,oldVal){} newVal,oldVal 这两个参数是默认属性

今年3月3日发售的任天堂新一代主机的价格是：{{price}}日元,含税价格为：{{priceInTax}}日元,折合人民币为：{{priceChinaRMB}}元

9、设置计算属性 set get

设计计算属性同步更新元数据的值
设置计算后的值推想回原来的值如现在含税价格是10800 那么没含税价是多少
当要取得priceInTax的值时走get逻辑当要去设置priceInTax时走set逻辑

今年3月3日发售的任天堂新一代主机的价格是：{{price}}日元,含税价格为：{{priceInTax}}日元,折合人民币为：{{priceChinaRMB}}元

10、Class绑定 v-bind:class

为这个div 的class属性绑定(v-bind)一个active的class 但是这个active是什么时候生效看isActive的变量
为html标记绑定样式单class属性

可以用来切换class 做一个样式切换

正常：v-bind:class
简写：:class

红色文本

为这个div的class属性绑定上active这个css样式什么时候绑定看isActive这个Vue的变量

红色文本

11、class对象绑定 :class

为html标记绑定样式单class对象

可以用来切换class 做一个样式切换

红色文本

12、条件渲染 v-if v-else-if v-else

判断vue.js的变量的值然后执行页面渲染逻辑 (if-elseif-else)

成绩未公布

{{result}}分 - 考试不及格

{{result}}分 - 还需努力

{{result}}分 - 考的不错玩游戏吧

13、元素显示 v-show

标记是否显示html元素 (注意 v-show设置的标记在html dom中不会消失)
这个不是虚拟dom 所以show就是显示和不显示但是dom还在相等于display:none

任天堂新一代主机switch

14、循环数组 v-for

循环数组元素整理内容显示到页面上
循环 index是数组的下标

{{index + 1}} {{game.title}} /售价: {{game.price}}元

15、对象循环 v-for

循环js对象把对象内容循环显示到页面上
要先写value 再写key 顺序不能搞反

js对象迭代

{{key}}:{{value}}

16、事件处理器 @click

页面元素的事件绑定 (click keyup load等等)
keyup 按下键盘的某一个按键时
$event 事件对象
获得用户的输入信息

事件处理器

【表单系列】

1、表单控件绑定 v-model input[type='text']

为表单控件元素创建双向数据绑定 (将js变量的值快速设定到控件上然后将用户输入的内容快速设置回js变量)

表单控件绑定

Message is :{{message}}

2、表单复选框 v-model input[type='checkbox']

表单复选框

生化危机

模拟飞行

塞尔达传说

您选择的游戏是：{{checkedGames}}

3、表单单选按钮 v-model input[type='radio']

表单单选按钮

选择性别

男



女

选择爱好

玩游戏



看电影

选择结果
性别:{{pickedSex}}
爱好:{{pickedHobby}}

4、表单下拉框 v-model select

multiple 代表可以多选

你最喜欢的NBA明星是：

我的全明星：


选择结果
我最喜欢:{{likedNBAStar}}
我的全明星:{{likedNBAStars}}

5、表单修饰符 .lazy .number .trim

.lazy 懒加载用户的输入内容时不做绑定数据的更新处理在控件的on change事件中更新绑定的变量就是等用户输入完之后鼠标点出输入框才会更新并不会实时更新
.number 数字将用户输入的内容转换为数值类型如果用户输入非数值的时候则返回NaN
.trim 修剪自动去掉用户输入内容两端的空格

用户注册


    用户：
    
    可注册



    年龄：
    



    个人简介：

    


信息区
{{username}}
{{age}}
{{content}}

【组件系列】

1、组件：基础的基础 Component,portlet

组件就是页面上的一小块区域内容完成一个小的页面功能视频第六课比如天气预报
注册了一个组件但是这个组件一定是要在实例 new myApp之前才行

2、组件：局部的组件
Vue.js的组件不仅可以单独声明注册使用还可以在Vue实例中进行局部注册使用

3、组件：表格组件
制作表格组件为自己的页面表格编写表格组件
需要把组件注册到tr标签里不然自己定义的组件不能在表格里显示
如果想在表格里使用组件需要使用is属性

2017年最期待的游戏是

编号

游戏名称

4、组件：数据函数
为vue.js组件添加数据使组件可以动态显示各种数据注意是数据函数不是数据属性
数据函数返回一个属性值对象

今天的天气是

5、组件：传递数据
为组件传递数据制作课接受参数的组件
props:['score'] 为这个组件创建了一个score的属性
:score="50"给这个属性绑定了50这个值

你的成绩

6、组件：传递变量
为组件传递变量数据制作可接受变量参数的组件

请输入您的名字：

7、组件：参数验证
proos:组件参数验证语法为组件中接受到的变量进行逻辑验证
只有传递string时不采用v:bind形式其余情况均采用v-bind形式传递

身世之谜

8、组件：事件传递
父组件myApp 子组件
子组件通过事件给父组件传递参数
v-on 侦听组件事件当组件触发事件后进行事件处理用在父组件当中
$emit 触发提交事件并将数据提交给事件侦听者用在子组件当中

$emit触发add_event 子组件事件把参数传给 getAddResult父组件

父组件中getAddResult:function (pval)接收到的参数就是子组件this.$emit的第二个参数[result:value]
父组件中的pval.result 也就是result:value

人生加法

9、组件:slot插槽
slot是父组件与子组件的通讯方式可以将父组件的内容显示在子组件当中
slot 内容有[你的视频做的太差了,千万不要学koma,你教教他们两个吧]这些内容显示在父组件的后面
你好 koma! 你的视频做的太差了
你好 mike! 千万不要学koma
你好 jojo! 你教教他们两个吧

你的视频做的太差了

千万不要学koma

你教教他们两个吧

10、组件：组合slot
slot命名在子组件中通过为多个slot进行命名来接受父组件的不同内容的数据

皮尔斯
杜兰特
隆多

以上入门

VUE进阶

渐进式框架 Vue的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合另一方面
当与现代化的工具链以及各种支持类库结合使用时 Vue 也完全能够为复杂的单页应用提供驱动

cli:vue.js命令行方式的使用和开发
vue-router: 路由框架
vuex:状态管理
transition: 动画效果

vue安装命令行

最新版本确认： npm show vue-cli
[sudo] npm install -g [email protected]
安装版本确认： vue -V

命令行帮助： vue -h 使用如：vue help init
1、init 初始化
2、list 模板列表
3、build 发布
4、help[cmd] 帮助

vue命令行
vue init webpack 项目名称推荐使用
vue list 就是显示全部模板

vue init webpack my-web [使用webpack模板初始化了一个叫my-web的工程]
vue init username/repo my-project [使用自己的gitHub的用户名/子项目名工程名初始化了一个工程]

wabpack 模板工程
创建vue工程 cd到所需要创建工程的目录

vue init webpack myweb

创建工程选项：
1、工程名 Yes
2、确认Vue工程 Yes
3、自己的账户邮箱 Yes
4、(1)编译器 (2)运行时选择1
5、路由 Yes
6、ESlint 语法检测器 no
7、单元测试 no
8、e2e 测试 no
9、(1)npm包管理 (2)yarn包管理选1

目录结构
build/ 编译
config/ 设置
src/ 源代码重要
static/ 静态目录放静态文件比如图片 css
test/ 测试目录
e2e/ 基于浏览器测试
babelrc/ 基于es6语法设置
index.js 初始化的文件
packge.json node.js的包管理文件
pre-processors 预处理 sass less

packge.json文件里的"vue": "^2.5.2" 版本太老去github里去看修改目前是2.6.10
"^{2.5.2"这里的} 删除了就是精确指定版本推荐删除

cd myweb 进入项目
npm run dev 开启本地服务器
npm run build 打包加密发布会创建dist文件夹

引入bootstrap4框架

cd到 myweb
npm install bootstrap --save --save-exact 精确安装版本
编辑 main.js 应用程序入口文件入口文件就是首页一个网页的入口全局变量在这里声明

编辑 main.js 入口文件js 导入bootstrap的CSS 和相关依赖

import Vue from 'vue'
import App from './App'
import router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'

编辑 app.vue 入口组件文件html 添加三个按钮：

这里入口文件可以想成本来一个文件有html 有 js 但是分成了两个文件都是入口文件
入口html文件是 App.vue
入口js文件是main.js

npm run dev

【可选知识】 Bootstrap + Vue
https:// bootstrap-vue.js.org/

使用ajax库 axios

为网页增加远程数据存取能力ajax 或 http库axios(用于浏览器或 node.js)
导入axios库从服务器端取得数据

cd myweb
npm install --save --save-exact axios vue-axios
vue-axios是对axios进行封装的vue组件装上之后能够简单的使用axios库

注册组件在main.js中添加
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios) 在vue的全局区域中注册这两个组件等于就是给vue安装组件注册完之后就能然所有的组件访问axios库而上面的是安装导入文件

编辑组件 components组件文件夹下的 helloworld.vue文件删除div内所有内容 style所有内容

在template中编辑

{{content}}

在script中编辑
export default {
name: 'HelloWorld',
data () {
return {
content:''
}
},
//mounted 安装
mounted() {
this.axios.post("http://api.komavideo.com/news/list").then(body => {
this.content = body.data
})
}
}

使用这个axios库post提交给这个API("http://api.komavideo.com/news/list")获得一段数据body
然后把数据的值赋值给content变量在pre标签里显示出来
从这个网址中取数据返回一个body 然后这个body.data属性赋值给 content内容

自定义css样式

定义属于自己的css样式文件 my.css 入口文件的css
入口文件app.vue 写html
入口js文件 main.js 写js
此次课程是指入口文件的css

进入 assets目录新建my.css文件添加
.myclass1{color: red;
border: 1px solid green
}

app.vue入口文件 script里import css 相对路径(必须)
import './assets/my.css'

在template添加html

您好！

开启服务器后修改代码能自动刷新页面不用修改后再关闭开启 = 热更新或实时更新

组件的结构

vue命令行开发模式为我们带来的组件开发方式
开发各种各样的vue组件拼装组件生成页面命令行开发特点

所有的组件都被统一放在工程中的组件文件夹中
{myproject}/src/components/

组件格式
template: 组件html内容
script: 组件js脚本(es6)
style: 组件css样式单

html部分

{{msg}}

js部分
improt...各种
输出这个组件:
export default{
name: 'HelloWorld', //组件名
data() { //组件的数据不是属性是方法
return{
msg: 'hello' //return java脚本的对象一个变量名
}
}
}

css部分
scoped代表这些css只应用到自己这个组件推荐添加

一个组件

工程的结构
webpack模板生成的工程结构

工程目录
build = webpack设置文件：作webpack打包工具的设置几乎不用改

config = 工程设置文件：设置工程如端口号8080换成8081 打包时这个css文件想使用sass还是less该怎么做插件在这里设置

src = 源代码文件： assets资源文件图片 css components组件文件夹 router路由文件夹 vuex状态管理

static = 静态文件夹(编译时直接拷贝至发布文件夹) ：比如放一些谷歌的html 一些万年不变的文件放在这里

index.html = 网页启动入口文件：单页应用程序单就这一个页面index.html body不要改 head可以改

1、路由 vue-router

路由组件vue-router

安装
npm i -E vue-router
但是在创建工程之初已经安装过vue-router了

导入 //在 ./touter/index.js导入文件里已经默认导入
import Vue from 'vue'
import Router from 'vue-router'

注册到全局 ////在 ./touter/index.js导入文件里已经默认注册
Vue.use(Router)

输出一个Router类这个Router是定义各种url的映射

export default new Router({
routes: [
{
path: '/', //url /根目录
name: 'HelloWorld', //根目录后面的url /HelloWorld
component: HelloWorld //绑定导入的 HelloWorld组件
}
]
})

流程
1、组件写好
2、路由文件导入组件路径 import HelloWorld from '@/components/HelloWorld'
3、把这个导入的组件绑定给某一个url 这样完成url对于组件的映射
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}

使用路由
1、在main.js 里导入相对路径 import router from './router' //这里已经默认导入

2、下面是整个程序的入口组件把刚刚导入的 router 在入口组件里注册
意味着今后所有的子组件都能使用到或访问到这个router对象 //这里已经默认导入

new Vue({
el: '#app',
router, // 注册router 已经默认注册
components: { App },
template: ''
})

2、静态路由

做一个简单的路由
1、组件文件夹创建文件
HelloWorld.vue
News.vue
About.vue
每个组件文件添加

News Page

一个html

2、编辑路由文件index.js 导入每个组件
import About from '@/components/About'
import News from '@/components/News'

3、然后把导入的组件绑定到url上
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/news',
name: 'News',
component: News
}

4、编辑app.vue 总入口组件添加html
此时使用标签此标签展示一个a链接 to 是链接指向哪个组件路由地址

Home
新闻
关于

5、是路由出口路由匹配到的组件将渲染在这里就是说上面的所有内容会显示在这个里面这个就是一个模板

3、动态路由

动态路由是指在URL路径中含有动态参数的路由比如说 /player/1 /player/2 /player/3
url是同一个但是后面的参数不一样所以结果也不一样

1、创建组件 Player.vue

//这里必须用div包裹不包裹会编译出错

2、设置路由

import Player from '@/components/Player'

{
path: '/player/:uid',
name: 'Player',
component: Player
}

3、app.vue设置渲染
库里
哈登

4、嵌套路由

指在动态路由的基础上再加上附加的嵌套url (就是加上子组件) 比如说(/player/:uid/*)
/player/1/profile 或 /player/1/stats 等等

1、创建对于Pleyer.vue组件的子文件夹 Player文件夹
然后创建文件 Profile.vue + Stats.vue

2、编辑路由文件
import PlayerProfile from '@/components/Player/Profile'
import PlayerStats from '@/components/Player/Stats'

{
  path: '/player/:uid',
  name: 'Player',
  component: Player,
  //添加孩子 子组件 这里['/profile']会出错
  children: [
    {
      path: 'profile',
      component: PlayerProfile
    },    {
      path: 'stats',
      component: PlayerStats
    }
  ]
}

3、编辑父组件Player

5、路由编程

在前面的讲解中是通过router-link标签来生成页面的a标签然后进行url转向的其实我们不仅可以通过标签来实现
还可以通过编程的方式来实现
router-link
router.push(location,onComplete,onAbort?)

1、编辑文件 App.vue

添加html
:to="{}" 这个:to是后面需要一个对象和下面click方法里的所有push 完全一样
可以省略click事件写法直接写在标签里

库里3

哈登3

$router是 router路由对象

6、多路由拼图

为一个路由(画面)组合多个组件完成整个页面用组件进行页面内容的组合
router-view[name] 用于绑定某一个路由中的某一个组件
components

1、创建组件创建文件夹setting
Detail.vue
Header.vue
Sidebar.vue

2、路由导入组件 index.js
import SettingHeader from '@/components/setting/Header'
import SettingDetail from '@/components/setting/Detail'
import SettingSidebar from '@/components/setting/Sidebar'

修改根路径component为components设置多个组件{} 起一个名字mymyHeader后面是导入的组件名
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
components: {
myHeader: SettingHeader,
mySidebar: SettingSidebar,
myDetail: SettingDetail
}

3、App.vue 使用渲染组件这里使用

7、URL重定向

重定向指令：redirect 设置一个路由给这个路由重新指定一个地址('/player/1') 或组件{name: 'About'}
路由别名：alias 就是给一个路由地址设置多个名字都指向一个地址

1、创建组件文件About1.vue

2、路由设置
import About1 from '@/components/About1'

{
  path: '/about1',
  name: 'About1',
  component: About1,
  //alias别名 about1能访问 同时 /aboutme也能访问
  alias: '/aboutme'
},
{
  //创建了一个路由内容 路由敲上/curry 路由就能重定向(redirect)到'/player/1' 这里
  path: '/curry',
  redirect: '/player/1'

这里是重定向到About1组件 两种都可以
  //redirect: {name: 'About1'}
  //redirect: '/about1'
}

3、App.js入口文件调用


  Home
  About
  Player1
  Curry

8、多参数路由

路由属性props
$route.params.uid = 路由对象的.参数属性的.uid 取到这个uid的值

用这种方式能够为一个url传递多个参数

1、创建User.vue 组件

2、编辑路由 index.js
import User from '@/components/User'

{
  //接收两个参数
  path: '/user/:uid/:nationality',
  name: 'User',
  component: User,
  //这里属性设置true
  props: true
}

3、编辑 App.vue


  Home
  User1
  User2
  User3

Vue.cli 3

1、推荐配置
推荐node.js 8.11.0+以上
node.js -v 查看版本命令

2、如果安装了1.x或者2.x版本的需要先卸载
npm uninstall vue-cli -g 卸载命令

3、安装
npm install -g @vue/cli 安装命令
vue -V 查看版本

4、vue-cli 3 创建项目
vue create hello-world(项目名) 初始化一个项目

5、安装选项
(1)默认或者自定义选2
(2)自定义各种插件空格选中自选
(3)类风格语法 yes
(4)babel typeScript polyfills Yes
(5)选packge.json
(6)no

6、启动新项目
cd hello-world
npm run serve

7重点
(1)学习 typescript
(2)尽量使用vue 3
(3)typescript 三个流行框架都可以开发

VUE生命周期钩子函数钩子hook = 回调
vue实例创建、运行、到销毁期间的事件这些事件统称为生命周期钩子就是生命周期事件的别名

创建期间的生命周期函数：
1 beforeCreate() 实例刚在内存中被创建出来此时 data 和 methods中的数据都还没有初始化
2重要 created() 实列在内存中创建OK data 和methods 被初始化好了开始编译模板一般会做一些网络请求
3 beforeMount() 模板已经在内存中编辑完成了但是还没有把模板渲染到页面中
4重要 mounted() 此时已经将编译好的模板挂载到了页面指定的容器中显示可以看到渲染好的页面

运行期间的生命周期函数：
5 beforeUpdate() data改变时触发页面中显示的数据还没有更新但是data数据被更新了
6 updated() 触发时页面和data数据都已经保持同步最新

销毁期间的生命周期函数：
beforeDestroy() 触发时 vue实例就已经从运行阶段进入到销毁阶段实例上所有的 data和methods和过滤器和指令...都处于可用状态还没有真正执行销毁的过程
destroyed() 触发时组件已经被完全的销毁了此时组件中所有的data和methods 指令过滤器...都已经不可用

Vue路由全局守卫
由一个路由跳转到另一个路由监听这个过程在跳转期间做一件事

前置钩子(回调) 跳转前回调
router.beforeEach((to,form,next) => {
//从from跳转到to
document.title = to.metched[0].meta.title
next() //必须先调用一下可以传入false不跳转或者 '/'跳转到某一个路由
})

后置钩子(hook) 跳转后回调
router.afterEach((to,from) => {

})

路由独享的守卫
只有我进入某一个路由内才会进行一个回调
const router = new VueRouter({
touters: [
{
path: 'foo',
component: Foo,
beforeEnter: (to,from,next) => {
//...
}
}
]
})

组件内的守卫

Vuex 多页面状态管理所有组件的共享变量而且还是响应式的是插件需要安装
需要多个组件共享的变量使用一个外置的公共储存状态的实例
变量是响应式的数据一旦改变界面自动更新

管理什么状态？多个用户界面都需要用到的一些状态如用户名称登录状态商品收藏类
用户登录用户名称头像地理位置等等
商品的收藏购物车中的物品等等

单页界面的状态管理
state data数据也就是状态
view 可以针对state的变化显示不同的信息
actions 各种操作点击输入等等行为能改变状态state

开始
npm install vuex --save

1在src文件夹目录下创建一个文件夹 store(仓库) 作为vuex的文件夹
2创建index.js文件
import Vue from 'vue'
import Vuex from 'vuex'

1/安装插件底层会执行 Vuex.install = '' vue.prototype.$store = store
Vue.use(Vuex)

2.创建对象
const store = new Vux.store({
state: {
const: 1000 保存状态单一状态树概念(单一数据源)
},
mutations: {
方法
使用mutations修改状态会有一个浏览器插件(Devtools) 去谷歌商店搜索安装
会记录哪个组件是谁修改的以便于更好的跟踪查错这里是同步操作
increment(默认会有一个参数state ) {
state.const++
},
decrement() {
state.const--
},
updateinfo(){
this. $store.dispatch('aUpdateinfo') } }, actions: { 当修改mutations的时候如果有异步操作在这里操作操作完异步再提交到mutations去修改state action本身可以返回一个Promise 返回后可以在另外一个地方.dispatch去拿到Promise 然后.then() 就可以继续使用promise aUpdateinfo(context默认参数){ setTimeout(() => { context.commit('updateinfo') 异步修改必须这样然后去mutations里 this.$ store.dispatch('aUpdateinfo')
},1000)
}
},
getters: {
类似组件的计算属性从state里拿到的数据这个数据是需要经过变化的再给别人用的这种情况用getters
powerCounter(默认会有一个参数state ) {
return state.counter * state.counter
}
},
modules: {
划分模块针对不同的模块在这里面再做一些相关数据的保存可以把这个a模块抽离出来成一个对象变量这个变量里有这些对象这里a使用这个外面写的对象变量
使用的时候$store.state.a commit只会调用自己模块的东西 context也是
a: {
state:{},
mutations{},
actions{},
getters{}
} ,
b: {
state:{},
mutations{},
actions{},
getters{}
}
}
})

3.导出store独享
export default store

回到main.js文件挂载 import store from './store'
把store放到 el下面

然后需要用到的状态就可以在组件里使用 {{ $store.state.const }} 但是只要是修改状态(变量) 那一定要通过 mutations 修改在模板上添加方法@click 然后在methods里添加方法方法里使用mutations方法 this.$ store.commit('increment'.count)这里第二个参数是指的app.vue传到vuex的值参数被称为是mutation的payload 负载的意思提交的时候顺带一个参数
mutations提交风格
mutations响应规则只有在vuex里已经定义好的数据才能有响应式其他操作添加的数据没有响应式但是可以用push/pop/splice()/set()
Vue.set(state.info,'address','洛杉矶') 响应式添加界面刷新
Vue.delete(state.info, 'age') 响应式删除

mutations常量类型

getters状态的获取
$store.getters.powerCounter

Vue性能优化9法

函数型组件
优点：普通写法会有vue生命周期的各种处理函数型组件会作为一个函数处理使页面效率提高

子组件拆分
优点：Vue生命周期重处理给拆分成子组件

局部变量
优点：把计算属性在方法函数里赋值给常量引用常量提高效率

活用v-show,减少v-if
优点：v-show是不操作dom树性能比较高 v-if是动态改变dom树的内容渲染的性能会比较低

使用keep-alive 保持活动
优点：把一些不动的如给包裹住保持提高页面渲染的效率

活用延迟加载(Defer)
优点：把一部分逻辑先执行让一部分逻辑后执行顺序执行

分批处理(Time slicing)
优点：把传入的所有未处理数据分成几次几批处理提高画面渲染性能

非响应式模式(非观察模式，non-reactive)
优点：因为vue会实时动态观察一个双向属性所以把一个数据的观察者模式关闭

仅渲染可视化部分
优点：先显示用户能看到的数据再加载用户看不到的数据

优化心得
1.简单的单页应用可以忽略优化细节，重点可放在功能的实现上
2.但是对于上百个对象的协作交互渲染的应用时就该考虑对于每个细节部分来考虑如何进行优化
3.同时如果影响页面显示渲染的操作比如帧数>60帧为了防止影响用户的操作体验必须考虑到优化细节
4.对于拥有大量计算或者大量渲染的耗时操作，应该随时计算测试处理的时间积极思考优化策略哪怕只能提高1秒

监听事件
在外面写组件的

methods:{
onClickCell(){
console.log('某个cell被点了')
}
}

在组件里面写

methods: {
y() {
this.a = true;
this.$emit('click',this.text)
}
}

外面接收的话要在相应的地方写$event 就能收到里面的这个this.text 只能传事件不能传值

计算偶数是什么奇数是什么
this.text = this.n % 2 === 0 ? 'x' : 'o'

如果点击之后不等于空的话那么再点击就什么都不做
if(this.text !== ''){
return
}

MVVM

什么是mvvm Model View ViewModel

Vue

{{message}}

游戏列表

成绩未公布

{{result}}分 - 考试不及格

{{result}}分 - 还需努力

{{result}}分 - 考的不错玩游戏吧

任天堂新一代主机switch

js对象迭代

事件处理器

表单控件绑定

表单复选框

表单单选按钮

选择性别

选择爱好

选择结果

你最喜欢的NBA明星是：

我的全明星：

选择结果

用户注册

信息区

2017年最期待的游戏是

你的成绩

身世之谜

人生加法

{{result}}

以上入门

News Page

球员页面

球员页面

About page

User

你可能感兴趣的:(Vue)

Vue

{{message}}

游戏列表

成绩未公布

{{result}}分 - 考试不及格

{{result}}分 - 还需努力

{{result}}分 - 考的不错 玩游戏吧

任天堂新一代主机switch

js对象迭代

事件处理器

表单控件绑定

表单复选框

表单单选按钮

选择性别

选择爱好

选择结果

你最喜欢的NBA明星是：

我的全明星：

选择结果

用户注册

信息区

2017年最期待的游戏是

你的成绩

身世之谜

人生加法

{{result}}

以上入门

News Page

球员页面

球员页面

About page

User

你可能感兴趣的:(Vue)

{{result}}分 - 考的不错玩游戏吧