脚手架简介

• 就是一个快速搭建项目的工具

脚手架安装

• 项目根目录终端输入 npm i -g @vue/cli

脚手架使用

• 根目录下终端输入 vue create system
• 之后进行选择项目配置，等待片刻,出现success提示
• cd XX -进入
• npm run serve 运行项目
• 打开localhost:8080 创建成功

混入

• 1.全局混入

 1把公共的东西封装起来,放到混入对象中,有需要的时候,直接使用
 2混入格式:
 3写在main.js中，必须在实例化对象之前
 4vue.minxin({
 5数据
 6data(){
 7return{键:值}
 8}
 9})
10如果在混入中声明了变量，组件中也有同名变量的时候，组件中的变量会覆盖混入中的变量
11在混入中的钩子函数,不会被new对象中的组件中的钩子函数覆盖
12        created(){
13
14        }
15如果混入中声明了自定义方法,在组件中也有同名的方法,组件中的方法会覆盖混入中的方法
16        methods:{
17            方法名(){
18
19            }
20        }
21        方法
22            系统方法(生命周期钩子函数)
23            自定方法
24    })
25    new Vue({
26        render:h=>h(App)
27        ....
28    })

• 2.局部混入

1在哪个组件中使用，就在哪个组件中引用
2局部混入是一个单独的文件
3        在src/目录中创建一个目录,存储局部混入的
4            src/
5                mixin/
6                    test.js
7                在组件中如果需要使用,需在在组件中使用引入:import test from "./mixin/test.js"
8                在当前组件中进行注册混入
9                    mixins:[test,xxx]

常用修饰符

事件修饰符

1 .stop  阻止事件冒泡  @click.stop="方法"
2 .prevent 阻止默认事件  <a @click.stop.prevent="方法"><a> 
3 .once 阻止事件重复触发

表单修饰符

1trim:自动过滤用户输入的首尾空白字符
2number:自动将用户的输入值转为数值类型
3lazy  用户每一次触发都会马上更新,使用了该修饰符可以让用户通过回车,或者鼠标失焦触发

watch监听

• watch的作用是可以监听一个值的变化,并调用因变化需要执行的方法

11.普通监听
2实时的监听数据的变化
3watch监听属性中,把要监听的数据,作为方法名进行监听
4方法名(数据属性)(新值,老值)
5语法格式:
6watch:{
7变量名(参数1新,参数2老){
8                }
9        }

 12.立即监听
 2    如果我们需要在最初绑定值的时候也执行函数,则使用到immediate属性 值设置为true
 3    语法格式:
 4        ,
 5        watch:{
 6            变量名:{
 7                //钩子函数
 8                handler(新值,老值){
 9
10                }
11                //组件注入页面的时候就立即监听(执行上边的钩子函数)
12                immediate:true
13            }
14        }

 13.深度监听
 2    当需要的监听的值是一个对象.不能直接监听到对象值的变化,普通的watch方法无法监听到对象,只能监听属性的变量,我们如果需要监听对象中值的变化,只能使用深度监听deep属性对对象进行深度监听
 3
 4watch和computed 区别:
 5    1.watch中的函数不需要手动调用,computed内部的函数需要调用,调用的时候不需要()
 6    2.watch(属性监听),监听属性的变化,而computed(计算属性),计算是统计计算得到的数据
 7使用环境:
 8    a  +
 9    b
10    {{计算方法}}
11    computed
12        当一个结果受到多个属性影响的时候就使用我  c = a + b
13        return c
14        购物车总价
15    watch
16        当一个数据变化的时候,需要额外的操作
17        例如:搜素的时候
18            str:a  => b
19            根据str变化的值,完成其它的操作
20            监听str = b
21            把监听到的值作为请求条件
22            ba  baaa  bxxxx

ref和$refs

 1vue 操作数据
 2js  可以获取元素  document.get.....
 3ref 就是一个标签属性 方便我们获取该元素
 4
 5简单的用法:就是获取元素
 6<元素 ref="自定义的属性值"></元素>
 7
 8有一个$refs的对象这个对象中存储的所有的ref的值
 9$refs.ref属性的属性值
10如果在方法中需要使用this.$refs.ref属性的属性值
11console.log(this.$refs.ref属性的属性值)  <元素></元素>
12
13在父组件中使用子组件中的数据和方法
14
151.在父组件中使用的子组件标签绑定一个ref属性,并设置一个属性值
16当前的属性值就是当前的子组件
17使用的时候就可以使用 this.$refs.属性值.子组件中的数据或方法
18以上方式也可以实现子传父的过程

KeepAlive

 1App.vue
 2    <router-view/> 占位 具体加载哪个组件取决是什么路由
 3
 4    <keep-alive>
 5        占位标签
 6    <keep-alive>
 7    <keep-alive></keep-alive> 是vue中的内置组件,能在组件切换的时候,将状态保留在内存中,防止重复的DOM渲染
 8    就是将数据缓存起来
 9
10    如果使用以上的方式,是对所有的组件都进行缓存处理
11
12如果需要对一个进行缓存
13使用Route中的meta
14在路由的文件中添加一个属性
15router/index.js中添加meta属性
16需要个哪个路由组件设置缓存,就在哪里加
17
181.需要加缓存中的路由中添加meta属性,设置一个对象,键和值 值为true
192.在<keep-alive >
20    $route 当前路由对象.meta.自定义属性如果为真,就显示,如果为加,就删除 
21    <route-view v-if="$route">
22</keep-alive>