Vue初级
vue相关
李振恒
这个作者很懒,什么都没留下…
展开
-
vue工程,添加elementui
npm i element-ui -Smain.js文件下添加如下import ElementUI from 'element-ui' //新添加import 'element-ui/lib/theme-chalk/index.css' //新添加,避免后期打包样式不同,要放在import App from './App';之前Vue.use(ElementUI) //新添加...原创 2020-08-19 10:15:23 · 517 阅读 · 1 评论 -
在动态组件上使用 keep-alive
在动态组件上使用 keep-alive<div id="app"> <button @click="A">A</button><button @click="B">B</button> <hr> <div>没有加keep-alive标签的</div>...原创 2020-01-05 19:17:39 · 292 阅读 · 0 评论 -
具名插槽——slotの学习笔记
具名插槽 <div id="app"> <parent> <!-- 情况一:--> test1 <!-- 情况二: --> <template> test2 </templa...原创 2020-01-05 17:04:29 · 106 阅读 · 0 评论 -
$listeners与.native的使用
$listeners的使用官网解释:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。个人理解:创建parent组件的子组件child,child的子组件child_child代码如下: <div id="app"> <paren...原创 2020-01-05 00:48:35 · 509 阅读 · 0 评论 -
$emit的使用
$emit子组件可以通过emit触发父组件的自定义事件;<div id="app"> <heng @click="click1"></heng></div>Index.jsVue.component('heng',{ template:` <div> <button @click="$emit(\...原创 2020-01-04 22:24:25 · 493 阅读 · 0 评论 -
inheritAttrs和$attrs的使用
禁用继承属性inheritAttrs和$attrs的使用Index.html:<div id="app"> <test-input v-bind:class="class1" v-bind:style="{fontSize:17+'px'}" v-bind:test1='test1' te...原创 2020-01-04 21:15:11 · 321 阅读 · 0 评论 -
X-Tempates与Vue.extend手动挂载$mount
<div id="app"> </div> <script type="text/x-template" id="heng"> <p>hello</P> </script> <script> var heng = Vue.extend({ ...原创 2020-04-30 00:28:16 · 123 阅读 · 0 评论 -
slot的作用域与后备内容——slotの学习笔记
slot的作用域官方表述:父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。 <div id="app"> <parent> parent的data值:{{heng}} </parent> </div> <script> ...原创 2020-01-05 14:28:01 · 290 阅读 · 0 评论 -
Vue个人遗漏点汇总
vm.$watch的使用:vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用})可以观察变量a,变化的新的值和旧的值是什么?生命周期钩子解释:每个Vue实例在被创建的时候,都要经历一系列的初始化过程,比如说:需要设置数据监听、模板编译、将实例挂载到Dom结构上,并且在数据变化时,对dom...原创 2020-01-04 22:09:23 · 108 阅读 · 0 评论 -
Vue-cli与Vuexの学习笔记
Vue-cli前提:已经安装node.js安装cli:npm install vue-cli –g验证:vue –V (大写的V)初始化vue init <template-name> <project-name><template-name>:模板名称<project-name>:项目名字模板有以下几种,大部分都用第一种 `we...原创 2020-01-06 21:21:54 · 178 阅读 · 0 评论 -
.sync的使用
.sync的使用在.sync出现之前,要想实现子组件修改父组件的属性的值,需要通过如下代码:<div id="app"> <parent :title="title" @test1="title = $event" ></parent> </div> <script> v...原创 2020-01-05 12:30:58 · 6820 阅读 · 0 评论 -
{{text}}与v-html
{{text}}与v-html:为Mustache语法(双大括号),Mustache:英文:/ˈmʌstæʃ; məˈstɑːʃ/ 含义:胡子。官方注意:双大括号会将数据解释为普通文本,而非 HTML 代码,粗略解释:test = '<span style="color:red">test</span>'{{test}}的输出结果为:<span sty...原创 2020-01-04 22:19:21 · 166 阅读 · 0 评论 -
修饰词:.prevent、.stop、.capture与.self
修饰词:.prevent、.stop、.capture与.selfEvent.preventDefault:可阻止时间执行其默认功能:例如:阻止想submit这样子,本身带有功能的属性,使其本身功能失效!另一种失效的方法是return false,效果同上!Event.stopPropagation:允许事件的默认功能发生,但阻止事件传播<div @click.prevent=...原创 2020-01-04 22:22:37 · 343 阅读 · 0 评论 -
动态插槽名与具名槽的缩写——slotの学习笔记
动态插槽名官方:动态指令参数也可以用在 v-slot 上,来定义动态的插槽名:<base-layout> <template v-slot:[dynamicSlotName]> ... </template></base-layout>例子: <div id="app"> <parent>...原创 2020-01-05 17:01:53 · 4137 阅读 · 0 评论 -
递归组件——练习实例
<div id="app"> <parent :list='list'></parent> </div> <script> var child = { props:{ list:{ type:Array...原创 2020-04-30 00:28:04 · 110 阅读 · 0 评论 -
作用域插槽——slotの学习笔记
作用域插槽有时让插槽内容能够访问子组件中才有的数据是很有用的 <div id="app"> <parent> <template v-slot:test6='parentUsers'>{{parentUsers}}---{{parentUsers.user}}</template> ...原创 2020-01-05 17:05:36 · 100 阅读 · 0 评论 -
$root、$parent、$ref以及父组件方法共享——学习笔记
root、root、root、parent、$ref以及父组件方法共享_代码实例<div id="app"> <input type="text" ref="in"> <heng ref="re"></heng> <div>父组件的摁妞</div> <bu...原创 2020-01-05 21:07:52 · 169 阅读 · 0 评论