![](https://img-blog.csdnimg.cn/20190903093824635.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue开发应用
菜鸟搬砖记
世上无难事,只要肯放弃。。。
展开
-
VUE 3 安装
如果原先有安装vue2脚手架的,先把vue2脚手架卸载npm uninstall vue-cli -g接着安装vue3新的脚手架npm install -g @vue/cli查看版本号vue -V创建项目旧版本: vue init webpack 项目名称新版本: vue create 项目名称(不支持用驼峰)...原创 2021-08-31 11:57:26 · 277 阅读 · 0 评论 -
vue生命周期
beforeCreate(创建前)el和data还没初始化无法访问methods, data, computed等上的方法和数据created(创建完成)可以访问methods, data, computed等上的方法和数据data已经初始化,el没有挂载阶段还没开始,el属性不可见beforeMount(挂载前)挂载开始之前被调用编译模板,把data里面的数据和模板生成html,完成了el和data 初始化数据和模板还没有被挂载到页面上mounted(挂载完成)挂载完原创 2021-05-19 20:24:18 · 155 阅读 · 0 评论 -
vue插槽用法
vue中插槽主要是用于父组件传递给子组件HTML模板默认插槽父组件:<template> <div> <child> <div>父到子的插槽</div> </child> </div></template><script>import child from './child'export default { comp原创 2021-05-19 20:23:41 · 134 阅读 · 0 评论 -
vue中常用的修饰符
v-model修饰符lazy修饰符会使光标离开输入框时,才会更新数据 <input type="text" v-model.lazy="value1">trim修饰符会自动过滤输入框收尾空格 <input type="text" v-model.trim="value2">number先输入数字就会限制输入只能是数字先字符串就相当于没有加number注意,不是输入框不能输入字符串,是这个数据是数字 <input type="text" v-原创 2021-05-19 20:23:09 · 331 阅读 · 2 评论 -
delete和vue.delete删除数组的区别
<template> <div>delete和vue.delete的区别</div></template><script>export default { data () { return { arr1: [1, 2, 3], arr2: [1, 2, 3] } }, created () { this.init() }, methods: { init原创 2021-05-19 20:22:26 · 1066 阅读 · 0 评论 -
vue代码模板解析
在vue开发中,我们经常碰到一些vue模板解析的问题,用户在代码编辑器中用vue写的代码,我们从里面拿到的是一个字符串,这个时候,我们就需要把这个字符串解析成我们需要的内容主要源码如下:<template> <div> <div>vue代码解析</div> <!-- 组件渲染 --> <component :is="comp" /> </div></template>&l原创 2021-04-14 17:28:25 · 510 阅读 · 0 评论 -
vue中命名视图和命名路由
命名路由在路由中配置 routes: [{ path: '/', name: 'header', component: header }, { path: '/content', name: 'content', component: content } ]路由需配置name值,这样就可通过router-link用name来跳转<template> <div> &原创 2020-10-23 16:06:34 · 552 阅读 · 0 评论 -
vue组件全局注册和局部注册
全局注册如果想要一个组件在项目中哪里都可以直接调用,这个时候就需要用到全局注册,全局注册的缺点就是:注册了的全局组件,就算不需要用到,仍会占用内存1.创建组件创建一个文件zujian,在这个文件中创建zujian.vue,在zujian.vue中:<template> <div>我是一个组件</div></template>2....原创 2019-09-03 10:43:21 · 2571 阅读 · 0 评论 -
vue中的路由介绍
1. this.router和this.router 和 this.router和this.route区别this.$router: 访问路由器,即整个项目的路由this.$route: 访问当前路由2. router-link 和 router-viewvue路由是通过组件映射到路由中去,在router.js文件中配置相应的组件对应,如下:// 1. 定义 (路由) 组件。// 可以...原创 2019-08-23 15:51:23 · 845 阅读 · 0 评论 -
vue中事件监听watch
vue中watch实际上是用来监听vue实例中的数据变化监听String<template> <div @click="stringClick">{{msg}}</div></template><script>export default { name: "jianting", data() { ...原创 2019-08-23 17:35:00 · 41912 阅读 · 8 评论 -
vue中混入(Mixins)
Mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式。那么我们在什么时候需要使用混入呢?页面的风格不同,但是执行的方法和需要的数据类似,这个时候,我们就不需要每个页面都写一套相同的代码,可以用混入,如下:在page1.vue中:<script>export default { data() { return { dat...原创 2019-08-23 16:50:01 · 2508 阅读 · 1 评论 -
vue父子组件传参
父组件传给子组件在父元素parent.vue中:<template> <Child :parentToChild="parentToChild" /></template><script>import Child from "./child";export default { name: "parent", comp...原创 2019-08-06 10:41:07 · 641 阅读 · 0 评论 -
vue单页应用之创建和运行
首先要开始vue单页应用开发,肯定是要知道如何运行,如何创建单页,这里将一步步带你入vue的坑。。。1.安装node安装node并不是叫你学习node,而是我们需要node里面npm所有才去安装,进入node官网的下载页http://nodejs.cn/download/下载合适的安装包进行安装,安装完毕之后在命令框中输入npm -v看下是否有安装成功 如果有显示npm的版本号说明安装成功2. 引原创 2017-12-05 10:22:49 · 1616 阅读 · 0 评论