脚手架安装
1在电脑上安装node 和npm
输入 node -v 和 npm -v 确保有版本号输出
2 安装淘宝镜像源
npm install -g cnpm --registry=https://registry.npm.taobao.org
3安装VUE脚手架
npm install -g @vue/cli
4 拉回2版本
npm install -g @vue/cli-init
过滤器 {{ msg| filter }}
（我想到了angualr的管道了 原来叫过滤器啊）
在组件中写入filters键值对 里面写filter的方法 (方法可以传参 也可以不传)
//声明 filters:{ '过滤器的名字':function(val,a,b){ //a 就是alax ，val就是当前的数据 } } //使用 管道符 数据 | 过滤器的名字('zxd'，'cyy')
let App = { data() { return { msg:'xxxx2312' }; }, template:` <div>我是APP --{{msg | myReverse}} <h2>{{time |myTime('YYYY-MM-DD') }}</h2> </div> `, filters:{ myReverse:function (val){ console.log(val); return val.split('').reverse().join('') }, myTime:function (val,formatStr){ return moment(val).format(formatStr) } }
http://momentjs.cn/ 这里下载的moment.js 可以很方便的对后端发来的数据做格式化处理！
》 moment(new Date()).format('YYYY-MM-DD') "2020-09-24"
>moment('2018-07-24').fromNow(); "2 years ago"
Vue.filter('过滤器的名字'，function(val,a,b){}) 在各个组件中都能使用 数据 | 过滤器的名字('alex'，'wusir')
从生到死
ed用的多
diff算法
-
-
-
虚拟DOM React
-
发送ajax 获取数据 实现数据驱动视图
-
-
-
-
获取真实DOM
-
-
-
-
-
激活当前组件
-
-
-
<keep-alive> Vue提供的内置组件，主要作用，让组件产生缓存
-
停用当前组件
-
-
-
destroyed
-
如果开了定时器，一定要关闭定时器
-
beforeCreate(){ // 组件创建之前 console.log(this.msg); }, created(){ // 组件创建之后 // 使用该组件，就会触发以上的钩子函数，created中可以操作数据，发送ajax，并且可以实现vue==》页面的影响 应用：发送ajax请求 console.log(this.msg); // this.msg = '嘿嘿黑'; }, beforeMount(){ // 装载数据到DOM之前会调用 console.log(document.getElementById('app')); }, mounted(){ // 这个地方可以操作DOM // 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素，vue操作以后的DOM console.log(document.getElementById('app')); }, beforeUpdate(){ // 在更新之前，调用此钩子，应用：获取原始的DOM console.log(document.getElementById('app').innerHTML); }, updated(){ // 在更新之前，调用此钩子，应用：获取最新的DOM console.log(document.getElementById('app').innerHTML); }, beforeDestroy(){ console.log('beforeDestroy'); }, destroyed(){ console.log('destroyed'); }, activated(){ console.log('组件被激活了'); }, deactivated(){ console.log('组件被停用了'); }
-
Vue的全家桶（kfc） vue+vue-router+vuex
vue+vue-router 主要来做 SPA（Single Page Application） 单页面应用
vue-router是vue的核心插件
为什么要使用单页面应用？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"></div> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> // 如果是模块化编程，Vue.proptotype.$VueRouter = VueRouter //组件 const Home = { data(){ return {} }, template:`<div >我是首页下面的页面</div>` }; const Course = { data(){ return {} }, template:`<div >我是课程下面的页面</div>` }; // 路由 const router = new VueRouter({ mode:'history', routes:[ {path:'/home',component:Home}, {path:'/', redirect:'/home' ,component:Home},{path:'/course',component:Course}] }) let App={ data(){ return{ } }, template: ` <div> <div class="header"> <router-link to = '/'>首页啊</router-link> <router-link to = '/course'>免费课程啊</router-link> </div> <router-view></router-view> </div> `, } new Vue({ el:'#app', // router:router, router, data(){ return{} }, template:` <App /> `, components:{ App } }) </script> </body> </html>
实例化路由
const router = new VueRouter({}）
路由设置中的写上下面，可以去掉#
mode:'history',
设置路由 列表里面对象的形式
routes:[
{path:'/home',component:Home},
{path:'/',
redirect:'/home'
,component:Home},{path:'/course',component:Course}]
在Vue 类写上：
router, 或 router:router,
<router-link to = '/'>首页啊</router-link> 这个类似于a标签 to 类似于href 来跳转、
<router-view></router-view> 这个标签用来显示加载跳转的路由的页面
命名路由 :
在路由配置中加上name属性
{path:'/homesad',component:Home,name:'Home'},
然后模板这么写
<router-link :to = '{name:"Home"}'>首页啊</router-link>
这样 to 和name就绑定了。 当我们改变path的时候，不需要改变to属性的值了
动态路由匹配
如何获取url的参数信息呢？
参数信息有 params 如下：
http://127.0.0.1:8080/user/1
和query 如下：
http://127.0.0.1:8080/user?user_id =1
路由配置中:
这么做：
path: '/user/:id'
在<router-link >标签中再加上params:{id:1} 或query:{id:1}
在data中声明一下
然后用钩子 watch 监听 调用
to.params.id
然后用声明的字段赋值
最后用到模板上就行了啊
const User = { data() { return { user_id:null } }, template: `<div>我是用户{{ user_id}}</div>`, created() { console.log(this.$route); //路由信息对象 // 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 }, watch: { '$route'(to, from) { // 对路由变化作出响应... console.log(to.params.id); console.log(from); this.user_id = to.params.id; //发送ajax } } }
编程路由
害，就是一个标签写一个方法 比如点击事件，
<button @click="clickH">首页 </button>
配置路由照样写哈
然后再methods 写一个对应的方法 这个方法用到了 router.push
methods:{
clickH(){
this.$router.push({
name:'Home'
})
}
}