![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
Pg-Man
这个作者很懒,什么都没留下…
展开
-
Vue注册组件的3种方式
第一种方式 extend:vue.js中这样写:var com1 = Vue.extend({ template:'<h3>这是第一种方式</h3>'});Vue.component("myCom1",com1);注:myCom1是采用的驼峰命名方式,所以html中这样写:<my-com1></my-com1>注:如果不采用驼...原创 2019-05-30 17:38:08 · 31332 阅读 · 1 评论 -
Vue实例使用render方法渲染组件
render渲染和注册component的区别在于,component只替换当前对应的模块,不会清空之前的内容,而render把之前的内容清空只放自己。js中写法:var login = { template : "<h1>测试测试<h1>"}var vm = new Vue({ el:"#app", data:{}, methods:{}, render...原创 2019-06-15 16:05:04 · 1861 阅读 · 0 评论 -
Vue监听路由改变
Watch监听:js代码://监听路由改变watch: { '$route.path':function (newVal,oldVal) { console.log(newVal,oldVal); } }注意:路由地址改变事件,keyup监听不了,只能用watchComputed计算:js代码:data: { firstName: 'Foo',...原创 2019-06-14 17:06:51 · 1329 阅读 · 0 评论 -
使用webstorm创建并运行vue项目
(一)首先安装:1:webstorm的安装:2:node.js的安装3:安装Git4:vue-cli(二)在cmd中使用命令创建:1:初始化一个项目,打开cmd(右键管理员)或者git,进入想要创建项目的盘,输入vue init webpack 项目名称然后一路回车2:创建完成之后,看项目里面是否有node_modules文件夹,没有的话会运行失败,需要在该项目下一...原创 2019-06-03 09:31:39 · 4192 阅读 · 0 评论 -
Vue三种请求方式
~~<html 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue-Resource基本使用</title> <link rel="stylesheet" href="css/bootstr...原创 2019-05-29 21:31:00 · 1161 阅读 · 0 评论 -
Vue 品牌管理
文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>品牌管理</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <...原创 2019-05-29 20:54:47 · 233 阅读 · 0 评论 -
ref获取DOM元素和组件
获取元素:js中写法:var vm = new Vue({ el:"#newBrand", data:{ }, methods:{ getElement(){ console.log(this.$refs.h31.innerText) } },});html中写法:<div id="n...原创 2019-06-01 15:31:02 · 657 阅读 · 0 评论 -
Vue写评论列表简单的评论列表 主要是组件的的创建以及子组件调用父组件方法的运用
js中写法:var commetBox = { template:"#temp", data(){ return { user:"", content:"" } }, methods: { postComment(){ var comment =...原创 2019-06-01 11:08:53 · 1035 阅读 · 3 评论 -
vue子组件调用父组件方法
js中写法var com = { template:'#temp1', methods: { myclick() { this.$emit("func"); } }};var vm = new Vue({ el:"#newBrand", data:{}, methods:{ s...原创 2019-05-31 11:37:18 · 349 阅读 · 0 评论 -
Vue父组件给子组件传值
js中写法:var vm = new Vue({ el:"#newBrand", data:{ msg:"天气真的很好" }, components:{ mycom:{ props:['message'], template:'<h1>从父组件获取的data中的msg是{{...原创 2019-05-31 10:43:55 · 211 阅读 · 0 评论 -
Vue组件切换
html中写法:<div id="newBrand"> <a href="" @click.prevent="compName='login'">登录</a> <a href="" @click.prevent="compName='register'">注册</a> <transition model="...原创 2019-05-31 10:00:48 · 156 阅读 · 0 评论 -
Vue组件中data的使用方式
全局组件中的data使用方式:js中写法:Vue.component("mycom1",{ template:'<h1>这是全局组件--{{msg}}</h1>', data:function () { return { msg:'这是全局组件中的data定义的数据' } }});var...原创 2019-05-31 09:38:47 · 3826 阅读 · 0 评论 -
vue路由实现经典布局
js中代码:var headBox = { template:'<h1 class="header">Head头部区域</h1>'};var leftBox = { template: "<h1 class='left'>Left侧边栏区域</h1>"};var mainBox = { template:'<h...原创 2019-06-12 09:34:43 · 2377 阅读 · 0 评论