脚手架简介
- 就是一个快速搭建项目的工具
脚手架安装
- 项目根目录终端输入 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>
标签：混入,使用,组件,脚手架,方法,监听,属性 来源： https://www.cnblogs.com/yangyang-it/p/14943490.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。