文章目录
一、vue的核心原理
安装
删除线格式
cnpm install vue -Svue
一、v-model(表单输入双向绑定)
用在什么地方？
- input标签中（包括text、radio、checkbox类型中）
- textarea文本域中
- select下拉选项中
1.原理
二、全局和局部组件
注意：
1、template必须添加根标签
2、定义组件标签名时的采用首字母大写，且为驼峰式命名的方法，例如AppName
3、使用组件标签时，采用小写加连字符，例如： app-name
修饰符
用在v-model后缀中
- .number(将字符串类型转化为数值类型)
- .lazy(提升性能，当鼠标移除输入框时，刷新一次)
三、过渡动画
例如：点击按钮，实现一个盒子的渐隐划出效果、渐显划入效果。
步骤：
1、引入VUE的js插件
2、先为盒子添加v-if属性实现显示/隐藏效果，注意不要使用.active{opacity: 0}实现（实现不了transition过渡效果）
3、在盒子的外围套上transition标签，注意一定不要忘记name属性，name的属性值为动画实现效果
<transition name="slide"></transition>3、在style标签内添加动画样式
.slide-enter-active,.slide-leave-active {
transition: all 3s;
}
.slide-enter,.slide-leave-to {
opactity: 0;
transform: translateX(500px);
}4.通过animate.css添加更炫酷的效果
- 添加animate.css文件
<link rel="stylesheet" href="./css/animate.min.css"> - 为transition标签添加
enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight"
VUE-nextTick原理
每一次num++的操作结果都会放在队列中，直到计算结束，再渲染到页面中
四、VUE-cli
1.原理：
(1)文件依赖层层叠加、复杂，一不小心删除一个文件，就可能导致项目无运行
<link href='xxxx.css'>
<script src='xxx.js'>(2)用require.js插件库，实现异步加载模块化（AMD）
require是在浏览器加载，采用异步形式
<script src='js/require.js'></script>
<script>
require(['./js/index.js','./js/hello.js']);
require.config({
paths : {
// 'jquery': ['https://code.jquery.com/jquery-3.5.1.min.js'],
"jquery" : ["https://cdn.bootcss.com/jquery/1.10.2/jquery"]
}
})
require(['jquery'],function($){
$(function(){
alert('load finished');
})
})
</script>
(3)webpack2.安装vue-cli
- 安装node
- 淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org - 安装
cnpm install @vue/cli -g - 创建一个vue-cli项目
vue ui/vue create demo1
五、computed计算属性
1.作用
：可以将data的数据的计算结果缓存起来，在msg数据不改变的情况下，计算机得到的结果不会重新计算
export default {
name: 'App',
data: function(){
return{
msg: 'wangqing'
}
},
computed: {
reverseMsg: function(){
return this.msg.split('').reverse().join("")
}
}
}六、 watch事件监听属性
总结一句话： watch 监听的是单个属性
基本的数据类型 简单监视
复杂的数据类型 深度监视
七、组件通信
(1) props $emit 解决 父子组件 层数较少的情况
(2) $attrs $listeners 解决 组件嵌套多层关系
(3) 中央事件总线 $bus new Vue()
$on() $emit 挂载的同一个实例化对象 解决兄弟组件传值
(4) vuex 的流程图 脑子 要有这个概念
1.父子通信（单层）
1-1父穿子props
（1）父组件
注意：传值必须在HelloWorld标签中进行
<HelloWorld user="小明" :brief="brief"></HelloWorld><script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data: function(){
return {
brief: {
title: '爱你一万年',
desc: '舒淇'
}
}
},
components: {
HelloWorld
}
}
</script>（2）子组件
<div class="hello">
<div>HELLO{{user}}组件</div>
<div>{{brief.title}}</div>
<div>{{brief.desc}}</div>
</div><script>
export default {
name: 'HelloWorld',
props: ["user","brief"]
}
</script>2.emit子传父
（1）子组件通过事件触发逻辑层的$emit，向父组件传递事件，以及数据
<button @click="clickFn">将小明改成小红</button>export default {
name: 'Child',
methods: {
clickFn: function(){
this.$emit('changeParent','小红')
}
}
}
(2）子组件通过@父组件的事件，重新定义新的方法，通过新定义的方法参数获取子组件传递的值。
<Child @changeParent="editUsername"></Child>export default {
name: 'App',
data: function(){
return {
username: '小明'
}
},
components: {
Child
},
methods: {
editUsername: function(even){
this.username = even
}
},
}八、slot组件插槽(承载分发内容的出口)
slot插槽的name属性
全局和局部过滤器
组件缓存keep-alive
组件在通过路由切换时，会频繁创建销毁，通过keep-alive可将组件的所有状态进行缓存，包括组件的创建以及组件的内部事件的执行状态
<keep-alive>
<router-view></router-view>
</keep-alive>meta的使用——用户页面跳转权限
meta的使用
router.beforeEach((to, from, next) => {
if (to.meta.auto) {
}
}
routes: [
{
path: '/blog',
name: 'blog',
component: Blog,
//给未来的路由做权限控制
meta: {
//证明用户访问该组件时需要登录
auto: true
}
},
]编程式跳转
methods:{
loginHandler(){
localStorage.setItem('user', {name:this.name,pwd:this.pwd}); // 跳转到博客页面
// 编程式导航
this.$router.push({
name:'blog'
});
}
}九、路由
1.路由模式
（1）history模式
采用h5提供的history接口，当路径修改时，会向服务器发送请求
缺点： 服务器需要做处理，将任意的页面的路径的请求，都返回vue页面给它，让写好的vue应用自动渲染页面
（2）hash模式
除了多了一个#之外，最大的好处时不需要服务器配置
2、地址栏上的路由模式
（1） xxxx.html#/user/1 params 动态路由参数
（2） oooo.html#/user?userId=1 query
给vue实例化对象挂载了两个对象 this.
r
o
u
t
e
r
(
它
就
是
V
u
e
R
o
u
t
e
r
)
t
h
i
.
router (它就是VueRouter) thi.
router(它就是VueRouter)thi.route (配置路由信息的对象)
命名路由
绑定自定义的属性 :to ="{name:‘路由的名字’}"
路由的参数
（1） path:’/user/:id :to = “{name:‘user’,params:{id:1}}”
（2）path:’/user’ :to = “{name:‘user’,query:{userId:1}}”
3.路由守卫
（1）router对象中守卫
作用：在页面跳转之前，判断是否有权限跳转
router.beforeEach((to,from,next)=>{
console.log('需不需要继续跳转');
if(to.path=='/LifeTime'){
next('noPage')
}else {
next();
}
})
（2）单独在路由配置守卫
{
path: '/LifeTime',
name: 'LifeTime',
component: () => import(/* webpackChunkName: "about" */ '../views/LifeTime.vue'),
beforeEnter(to,from,next){
console.log('单独在路由页面进入之前');
next();
}
}（3）在组件页面守卫
export default {
beforeRouteEnter(to,from,next){
console.log('在进入之前');
if(to.path=='/LifeTime'){
next('/noPage')
}else {
next();
}
},
beforeRouteLeave(to,from,next){
console.log('在离开路由时');
next();
},
beforeRouteUpdate(to,from,next){
console.log('在路由更新时');
next('');
}
}
4.vue-router的使用
(1)传统的开发方式url改变后，立刻发生请求响应整个页面，有可能资源过多，传统开发会让页面出现白屏
(2)SPA(single page applacation)单页面应用
锚点值改变以后不会立即发送请求，而是在某个合适的时机，发送ajax请求，页面局部渲染
优点： 页面不会立即跳转，用户体验好
5.嵌套路由(应用 子的路由 是不同的页面结构 )
/home/music ===> /home/movie
一个router-view中嵌套 另外一个route-view
6.动态路由匹配
当使用路由参数时，例如从/home/frontend导航到/home/backend,原来的公用组件ComePage实例会被复用，因为两个路由都渲染的是同一个租金按，比起销毁再创建，复用会更高效。不过，这也意味着组件的生命周期钩子不再会被调用。
因此，可通过watch在当前组件的内部，监听路由信息的变化
十、组件生命周期
mounted() {
console.log(this);//可获取组件所有内容
},
beforeCreate() {
console.log('创建之前')
},
created() {
console.log('创建之后')
},
beforeMount(){
console.log('挂载之前')
},
mounted() {
console.log(this);
},
beforeUpdate(){
console.log('更新之前')
},
updated(){
console.log('更新之后')
},
beforeDestroy(){
console.log('销毁之前')
},
destroyed(){
console.log('销毁之后')
}十一、vuex状态管理$store
1.state放置全局状态
state: {
username: '王晴',
age: 22
}<h3>欢迎您{{$store.state.username}}</h3>
<h3>年龄{{$store.state.age}}</h3>2. mutations修改数据或者状态的方法
mutations: {
//第一个参数为全局状态state,第二个参数为commit调用时的第二个参数
addAge(state,payload){
state.age+=payload;
}
}this.$store.commit用来触发mutation方法
methods: {
addAge: function(){
this.$store.commit('addAge',10)
}
}3.actions异步修改数据
actions: {
getJoke(context){
let httpUrl = 'https://api.apiopen.top/getJoke? page=1&count=10&type=text';
fetch(httpUrl).then((res)=>{
return res.json()
}).then((res)=>{
console.log(res);
//用于触发mutation中的getList方法
context.commit('getList',res.result);
})
}
}this.$store.dispatch(‘getJoke’)用来触发action方法
mounted(){
this.$store.dispatch('getJoke');
}4.vuex细分模块
(1)无命名空间
modules: {
mall
}
mall.js
export default {
state: {
mallname: "老陈商城"
},
mutations: {
setMallname: function(state,payload){
state.mallname = payload
}
}
}
<h1 @click="setMallname('小陈商城')">{{mall.mallname}}</h1>
computed: {
...mapState(['mall']),
},
methods: {
...mapMutations(['setMallname'])
}
（2）命名空间namespaced: true
export default {
namespaced: true ,
state: {
lunname: "老陈论坛"
},
mutations: {
setlunname: function(state,payload){
state.lunname = payload
}
}
}
...mapState('namespaced',['lunname'])
...mapMutations('namespaced',['setlunname'])5.getters计算属属性
getters: {
xuAge: function(state){
return state.age+1
}
}<h3>虚岁：{{$store.getters.xuAge}}</h3>6.辅助函数mapState, mapGetters,mapMutations,mapActions
用于简化
<h3>欢迎您{{$store.state.username}}</h3>
<h3>年龄{{$store.state.age}}</h3>十二、打包编译部署到服务器
1.新建文件vue.config.js配置
作用：使打包时的绝对路径变为相对路径
module.exports={
publicPath: './'
}2.npm run build打包
3.新建服务文件
server文件包含static文件夹和app.js文件
let express = require('express');
let app = express();
app.use(express.static('static'));
app.listen(3000,()=>{
console.log('服务器启动：http://127.0.0.1:3000')
})
8806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
