Vue
Leisure Tea
这个作者很懒,什么都没留下…
展开
-
webpack9-Vue中使用vue-router
webpack9-Vue中使用vue-router1. 初始化npm```npm init -y```2. 安装npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D3. 安装vue等npm i vue vue-router -Snpm i vue-loader vue-template-com...原创 2020-01-02 23:21:08 · 179 阅读 · 0 评论 -
webpack8-Vue的runtime下渲染单文件组件
webpack8-Vue的read-only下渲染单文件组件一、怎么在Vue的read-only下渲染单文件组件?使用render来渲染单文件组件。二、步骤初始化npmnpm init -y安装npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D安装Vuenpm i vue -S...原创 2020-01-02 16:35:44 · 272 阅读 · 0 评论 -
webpack7-Vue
webpack7-Vue一.npm初始化npm init -y二.安装npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -Dnpm i jquery -S三.安装Vuenpm i vue -S四.导入Vue4.1 方式1: 在入口js文件中 import Vue from “vue/dist/vue...原创 2020-01-02 15:30:07 · 245 阅读 · 1 评论 -
Vue-computed 计算属性
Vue-computed 计算属性一、说明计算属性,其实是一个属性,但需要通过方法来返回其值,返回的结果即该属性的值二、注意在使用该属性的时候,与data中的属性一样,直接写【属性名】即可计算属性会被缓存:第一次调用该属性时,会调用方法该方法,返回该值的结果,而后如果该属性依赖的其他属性中没有改变,则会从缓存中取该属性。每当该属性依赖的属性中有被修改的,则会调用方法,重新返回一个新的...原创 2019-12-22 16:36:50 · 199 阅读 · 0 评论 -
Vue-watch 监视
Vue-watch一、说明watch: {}用来监听数据的改变,每当被监听的数据改变时,就会执行对应的方法。一般用来监听路由路径的改变。二、watch监听变量代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="...原创 2019-12-22 16:15:11 · 168 阅读 · 0 评论 -
Vue-路由4 单路由多组件
Vue-路由 单路由多组件一、说明在一个路由中存在多个组件时,可以通过router-view元素的name属性来指定要渲染的组件,若不指定则为默认组件在路由中通过components配置多个组件,每个组件都有一个对应的名称,默认组件名称用default标识二、代码示例<!DOCTYPE html><html lang="en"><head>...原创 2019-12-22 15:29:49 · 1255 阅读 · 0 评论 -
Vue-路由3 路由嵌套
Vue-路由3 路由嵌套一、实现方式在路由中的children属性,该属性是一个数组,数组元素是对象,对象内容同routes。二、代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="../lib/vue.js"&...原创 2019-12-22 15:03:19 · 866 阅读 · 0 评论 -
Vue-路由2 给路由传参
Vue-路由2 给路由传参一、方式1—通过?传递参数实质在url中通过 ? 给路由对应的组件传递参数的方式,vue实例会将传递的参数放在$route.query对象中。注意:通过?的方式传递参数时,不用修改路由实例中的routes中对象的path路径在path对应组件中通过 this.$route.query.参数 来获取传递的参数这种传参方式的参数可以不传,仍然可以访问到对应组...原创 2019-12-22 14:11:22 · 244 阅读 · 0 评论 -
Vue-路由1 路由的基本使用
Vue-路由62 路由的基本使用一、概念问:前端路由是什么?答:在单页面应用中,前端路由是用来实现不同页面的切换,在单个页面中展示不同的内容(组件)。实现原理:通过url中的hash(#号)来实现的,http请求中不会包含hash的内容。二、代码示例注意:导入vue-router:导入vue-router.js前,先导入vue.js,因为vue-router.js依赖于vue.j...原创 2019-12-22 13:04:37 · 143 阅读 · 0 评论 -
Vue-组件6 子组件给父组件传值
Vue-组件61 子组件给父组件传值一、实质父组件中定义了一个方法,该方法用来修改父组件中的数据通过自定义事件绑定的方式给子组件传递父组件中的方法子组件通过this.$emit(‘方法名’, [参数1], [参数2], …)的方式调用传递过来的方法这样就实现了子组件给父组件传值二、注意父组件给子组件传递函数时,传递的是函数名,若加上括号,则是先运行该方法,然后再将该方法的返...原创 2019-12-21 21:56:10 · 118 阅读 · 0 评论 -
Vue-组件5 父组件给子组件传值
Vue-组件60 父组件给子组件传值一、传值的方式实质父组件给子组件传值,实上是给子组件的属性设置值。子组件通过该属性获取父组件传过来的值。组件的props,来自定义组件的自定义属性注意:props是一个数组,内容为自定义属性名。例:props: [‘msg’]data和props的区别:1.data是组件内的数据,props是组件的属性,父组件可以通过props中的属性传值...原创 2019-12-21 20:59:20 · 130 阅读 · 0 评论 -
Vue-组件4 组件切换
组件切换一、组件切换方式1—component元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="../lib/vue.js"></script> <style> ....原创 2019-12-21 18:23:29 · 153 阅读 · 0 评论 -
Vue-组件3 data和methods
Vue-组件58 data和methods一、data注意:组件中的data必须用一个函数返回,返回的数据为一个对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="../lib/vue.js"></s...原创 2019-12-21 17:33:48 · 815 阅读 · 0 评论 -
Vue-组件2 创建私有组件
Vue-57 创建私有组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="../lib/vue.js"></script></head><body> <div i...原创 2019-12-21 16:58:29 · 112 阅读 · 0 评论 -
Vue-组件1 创建全局组件方式
Vue-56 创建全局组件方式注意:驼峰命名 在调用的时候在每个大写字母(除了首字母)前面加 -,大写字母可改成小写来调用小写命名直接调用组件必须要有唯一了根元素创建方式1 [Vue.extend+Vue.component]<!DOCTYPE html><html lang="en"><head> <meta charse...原创 2019-12-21 16:53:30 · 106 阅读 · 0 评论