Vue系统指令
-
{{}}
:插值表达式
作用:将vue对象中的数据以及表达式显示到vue托管区域中
{{这里书写vue对象中data里面的数据或者表达式}}
-
v-cloak
:解决表达式闪烁问题
1. 定义一个样式
<style>
[v-cloak]{
display:none
}
</style>
2. 使用
<div v-cloak>{{name}}</div>
原理:当vue.js文件还没有加载出来时 使用[v-cloak]样式作用于当前指令所在标签,当vue.js能够起作用时,会自动删除v-cloak指令
-
v-text
:输出文本数据
<span v-text='name'></span>
-
v-html
:输出HTML结构数据
<div v-html='name'></div>
data:{
name:'<span>zs</span>'
}
-
v-bind
:动态给标签或者组件绑定属性
<div v-bind:class = 'cls'></div>
// 使用:简写v-bind
<div :class = 'cls'></div>
// 变量和常量组合
<a :href="'http://www.baidu.com/index/' + id">跳转</a>
data:{
cls: 'red blue',
id: 1
}
-
v-on
:绑定事件
<div v-on:click = 'show'></div>
// 简写
<div @click = 'show'></div>
methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
show: function () {
alert('Hello')
}
}
-
v-model
:双向数据绑定
// 可以使用的标签:input textarea select 组件
<input v-model='name'></input>
// name会和表单元素的value进行关联 value值变化 name值变化 反过来name值发生变化 value值也会发生变化
-
v-for
:循环输出HTML元素
<div v-for='(item,index) in list' :key = 'index'>{{item.name}}</div>
-
v-if
:根据表达式值的真假决定元素的显示隐藏
// isShow为true显示div 为false隐藏div
// v-if是直接操作DOM 即隐藏时会将该div从DOM结构中移除
<div v-if='isShow'></div>
-
v-show
: 根据表达式值的真假决定元素的显示隐藏
// isShow为true显示div 为false隐藏div
// v-show是操作div的样式 显示时添加 style = 'display:block'; 隐藏时添加style = 'display:none'
<div v-if='isShow'></div>
v-if 是删除DOM元素 效率比较低 会造成页面的结构重新绘制
v-show 是控制样式 只会改变当前这一个元素的样式 不会造成页面结构的重新绘制
在Vue中使用样式
使用class样式
- 数组
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
- 数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
- 数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
- 直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
使用内联样式
- 直接在元素上通过
:style
的形式,书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
- 将样式对象,定义到
data
中,并直接引用到:style
中
- 在data上定义样式:
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
- 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
- 在
:style
中通过数组,引用多个data
上的样式对象
- 在data上定义样式:
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
- 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
过滤器
`过滤器`:对需要展示的数据进行加工处理后再展示到界面,并不会
改变原数据
使用方法:原始数据 | 过滤器名称(参数)
自定义指令
指令
: 其实就是Vue给我们提供的操作DOM元素的一些方法
- 全局指令
Vue.directive('指令名称',{
// 指令第一次绑定到元素身上时执行(在内存中绑定到了DOM对象上边)
bind:function(el,binding,VNode){
// el: 指令所在的DOM元素对象
// binging.value 指令等号右边表达式的值
// binging.expression 指令等号右边表达式
// VNode.context 当前指令所在托管区域对于的Vue实例对象
},
// 当前指令所在元素插入到父节点时调用(不保证DOM已经渲染完毕)
inserted:function(){},
// 指令绑定的值发生变化时会去执行
update:function(){},
// 指令所在的组件值更新完毕时调用
componentUpdated:function(){},
// 自定义指令从当前元素解绑时调用
unbind:function(){}
})
- 私有指令
new Vue({
el:'#app',
// 私有指令
directives:{
'指令名称':{
bind:function(el,binding){
}
}
},
// 私有过滤器
filters:{
'过滤器的名称':function(value){
return 处理完毕的数据
}
}
})
生命周期钩子函数
钩子函数: 一个应用程序或者框架内部提前定义好的一批函数,这些函数会在特定的时间段自动执行
生命周期: 一个程序会存在初始化 - 运行 - 销毁等阶段,这些阶段统称为该程序的生命周期
new Vue({
el:'#app',
data:{},
methods:{},
beforeCreated(){},
// data中的数据和methods中的方法已经初始化完毕会去自动执行created方法
created(){
// 用于发生数据请求,也可以初始化一些数据
},
beforeMount(){},
// 真实DOM已经渲染完毕会执行mounted函数
mounted(){
// 操作真实DOM
}
beforeUpdate(){},
// data中的发生了变化而且被重新渲染到了界面上时才会执行
updated(){
// 数据更新后重新操作DOM
},
// 实例销毁之前,实例上面的各种属性和方法都还可以正常访问,通常可以在这里手动回收一些页面没有被释放的变量,比如清楚定时器的操作。
beforeDestroy(){},
// 实例已经从内存中被销毁
destroyed(){}
})
组件之间的传值
父子组件传值
父向子传值
// 1. 先在父组件中定义好要传递的数据
new Vue({
el:'#app'
data:{
msg:'我是要传递给子组件的数据'
},
components:{
son:{
template:'<div>我是子组件{{message}}</div>',
props:['message']
}
}
})
// 2. 在父组件中使用子组件的时候,用绑定属性的方式将父组件中的数据传递给子组件
<div id='app'>
<son v-bind:message = 'msg'></son>
</div>
// 3. 在子组件中定义一个props属性,该属性是一个数组,数组中定义用于接收传过来的变量。这个变量
// 和第二步绑定的这个属性同名
son:{
template:'<div>我是子组件</div>',
props:['message']
}
子向父传值
发布订阅者 设计模式
// 1. 定义好父子组件,定义好子组件需要传递给父组件的数据
new Vue({
el:'#app'
components:{
son:{
template:'<div>我是子组件{{message}}</div>',
data:function(){
return {
msg:'传给父组件的数据'
}
}
}
}
})
// 2. 在子组件中使用this.$emit触发一个自定义的方法名,然后传递数据
// 第一个参数就是自定义的方法名
// 第二个参数就是需要传递给父组件的数据
this.$emit('func',this.msg)
// 3. 在父组件中使用子组件时,绑定一个事件,事件名称和子组件触发的方法名同名
<div id='app'>
<son @func = 'getmsg'></son>
</div>
// 4. 在父组件的methods中定义一个事件处理函数
methods:{
getmsg:function(data){
// data就是子组件传过来的数据
}
}
ref获取DOM和组件对象
// 1. 在DOM元素或者组件上面绑定ref属性
<div ref='mydiv'>我是一个div</div>
<com ref = 'mycom'></com>
// 2. 使用this.$refs.属性值获取对象引用
this.$refs.mydiv // DOM对象
this.$refs.mycom // 组件对象
vue-router路由
前端路由: 浏览器对前端页面实现的跳转方式,一般只在单页应用(SPA)程序中出现
router route routes 的区别是?
- router: 是Vue实例内部的一个属性,是专门用来挂载vue-router对象的
- route: 表示routers内部的每一个路由对象的引用
- routes: 是Vue-Router实例内部的一个属性,是用来保存所有的路由规则
基本使用步骤
1. 创建路由对象并配置路由规则
// 1.1 创建组件模板对象
var login = {
template:'<div>登录</div>'
}
var register = {
template:'<div>注册</div>'
}
// 1.2 创建路由对象并配置路由规则
var router1 = new VueRouter({
// routes用来存放路由规则,每个路由规则都是一个对象
routes:[
// path: 页面#后面的地址
// component 需要显示的组件对象
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register}
]
})
// 1.3 将创建处理的路由对象和Vue进行绑定
new Vue({
el:'#app',
// 将vuerouter对象注册到Vue内部,以保证在托管区域中科院使用VueRouter内部提供的组件以及其他属性和方法
router:router1
})
2. 使用<router-view>进行占位
<div id='app'>
<router-view></router-view>
<div>
3. 使用<router-link>设置跳转路径
<router-link to='/login'>登录</router-link>
redirect重定向
在路由规则中配置
redirect
属性可以使路由进行内部切换,当访问path
中的路径时,会默认跳转到redirect
中指定的路径去。
{path:'/',redirect:'/login'} // 当访问根路径时,会默认跳转到login路径中
路由传参
query传参
// 1. 在跳转路径后面使用查询字符串拼接参数
<router-link to = '/login?name=zs$age=18'>登录</router-link>
// 2. 在路由对应的组件内部使用`this.$route.query`获取参数
this.$route.query.name // zs
this.$route.query.id // 18
params传参
// 1. 更改路由规则用于匹配参数
new VueRouter({
routes:[
// :id用于匹配/login/13后面的参数13
{path:'/login/:id',component:login}
]
})
// 2. 在跳转路径后面使用/拼接参数
<router-link to = '/login/13'>登录</router-link>
// 3. 在路由对应组件内部使用`this.$route.params`获取参数
var login = {
template:'<div>登录组件{{this.$route.params.id}}</div>',
created(){
console.log(this.$route.params.id) // 获取到的就是13
}
}
嵌套路由
// 1. 在父路由内部使用children属性配置子路由规则,子路由规则对象中的path属性不要 '/'
// 2. 在父路由规则对应的组件模板中添加router-view用于显示子路由规则对应的组件
// 3. 在<router-link>中设置跳转路径(将父路由和子路由的path拼接)
路由命名视图
给
<router-view>
添加name属性,用于指定显示哪一个组件
// 1. 将路由规则对象中的component改为components,表示一个路由规则下可以显示多个组件,每一个组件用一个名称对应起来,默认显示的组件用default对应
new VueRouter({
routes:[
// components对象内部按照 名称 - 组件对象的方式定义
{path:'/',components:{
'default': header,
'left': leftBox,
'main': mainBox
}}
]
})
// 2. 给<router-view>添加name属性指定显示哪一个组件
<router-view></router-view> // 不指定默认显示default对应的组件
<router-view name = 'left'></router-view> // 显示leftBox组件
<router-view name = 'main'></router-view> // 显示mainBox组件
watch的使用
watch
: 用于监听data中定义的数据的变化,只要被监听的数据发生了变化,就会执行对应的处理函数
watch监视数据变化
new Vue({
el:'#app',
data:{
msg:'hello'
},
watch:{
'msg': function(newVal,oldVal){
// newVal 表示变化后的值 oldVal 表示变化前的值
// 只要data中定义的msg发生了改变,就会执行这个函数
}
}
})
watch监视路由变化
通过监听
$route.path
可以监视到路由地址的变化
new Vue({
el:'#app',
watch:{
'$route.path': function(newVal,oldVal){
// newVal 新跳转的路由地址
// oldVal 跳转之前的路由地址
}
}
})
computed计算属性
computed
:计算属性,是指在computed对象中定义属性,属性的值是该属性后面函数的返回值,而且函数内部如果用到了data中定义的其他数据,只要这些数据发生了变化,都会重新触发函数的执行,计算属性的值也会发生变化。
new Vue({
el:'#app',
data:{
msg:'hello'
},
computed:{
'info': function(){
// 只要msg发生了变化,会重新触发该函数的执行
// info的值就是函数的返回值
return this.msg + 'world'
}
},
methods:{},
watch:{}
})
watch 和 computed计算属性的区别
watch可以对data中申明过的数据进行监视,只要被监视的数据发生了变化,就会触发对应函数
computed定义计算属性,定义的属性和在data中定义的使用方式一样,但是computed中的属性值是对应函数的返回值,只要函数中依赖的其他数据发生了变化,会重新计算返回值
data、props、computed的区别
data中的相当于申明变量,可以直接赋值也可以随后赋值
props中数据是从其他组件传递得到
computed中的数据是通过计算得到,是属性对应函数的返回值,计算结果会被缓存
-
npm: node package manager node包管理工具
-
nrm: node registry manager node 镜像地址管理工具
-
nvm: node version manager node 版本管理工具
--save和--save-dev
// 项目开发期间需要安装的依赖
// --save-dev 会将安装的包名以及版本号记录到package.json文件中的devDependencies节点中
npm install webpack --save-dev 等价于 npm install webpack -D
// 项目上线后需要安装的依赖
// --save 会将安装的包名以及版本号记录到package.json文件中的dependencies节点中
npm i webpack --save 等价于 npm i webpack -S
npm i 会将所有在package.json文件中的devDependencies节点和dependencies节点内所有的依赖包全部安装一遍
npm i --save-dev 只会下载devDependencies中的所有依赖包
npm i --save 只会下载dependencies中的所有依赖包
// 为什么安装包的时候要区分 --save 和 --save-dev
// 1. 使项目的阅读更加友好,便于理解项目结构
// 2. 安装对应阶段的包时更加方便
npm i cnpm -g
cnpm
yarn的使用
// 1. 使用npm全局安装yarn
npm i yarn -g
// 2. 初始化命令
yarn init -y
// 3. 安装包
yarn add package-name // 会将安装的包记录到dependencies节点里面
yarn add package-name --dev // 会将安装的包记录到devDependencies节点里面
yarn global add package-name // 安装全局包
// 4. 删除包
yarn remove package-name
// 5. 执行命令
yarn run dev
yarn global bin 查看全局包安装的路径
网友评论