VUE 学习笔记

 

       

问题	回答
用npm安装vue	cnpm install vue
全局安装 vue-cli	cnpm install --global vue-cli
创建一个基于 webpack 模板的新项目	vue init webpack my-project
build 文件夹放什么	项目构建相关代码，比如webpack
config 文件夹放什么	配置目标 包括端口号
App.vue	项目入口文件
main.js	项目的核心文件
v-html 指令	<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>菜鸟教程</h1>' } }) </script>
v-bind:class	<div v-bind:class="{'{样式的class名}': 布尔值表示是否启用 这个样式}">测试文字</div>
v-if	可见性是否被插入 比如  <p v-if="seen">现在你看到我了</p>   new Vue({ el: '#app', data: {    seen: true, } })
v-bind:href	<pre><a v-bind:href="url">菜鸟教程</a></pre>
控制input里的输入	<input v-model="message">
点击监听	v-on:click="onClick"   <form v-on:submit.prevent="onSubmit" >
v-model	v-model 指令用来在 input、select、text、checkbox、r adio 等表单控件元素上创建双向数据绑定
添加属性要用	Vue.set();
v-if 配对的标签	v-else 和 v-else-if
和 v-if 类似的标签	v-show
v-if和v-show的区别	v-if false 时 完全移除该元素，即 dom 树中不存在该元素 v-show false 时 该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。
v-for	<li v-for="site in sites">      {{ site.name }}    </li>
v-for 也可用来迭代对象	<li v-for="value in object">    {{ value }}    </li>   或者是     <li v-for="(value, key, index) in object">
计算属性	computed
监听属性值变化触发 第一种方法	var vm = new Vue(); vm.$watch( "属性", ()=>{ console.log("触发"):} ) ; 2019-03-03 执行完$watch里的回调方法，目标值才会真正变化
监听属性值变化触发 第二种方法	var vm = new Vue({ el: '#computed_props', data: { kilometers : 0, meters:0 },   watch : {   kilometers:function(val) { this.kilometers = val; this.meters = val * 1000; },   meters : function (val) { this.kilometers = val/ 1000; this.meters = val; } }
class样式绑定	样式绑定，可以绑字符串，也可绑对象   可用computed实现可计算的样式绑定
style样式绑定	v-bind:>   也可用
浏览器vue插件	Vue
如何引用	用<script>引入 Vue会被注册为一个全局变量 https://vuejs.org/js/vue.js 最新版本 https://cdn.jsdelivr.net/npm/vue 生产环境 用明确版本 https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js
cli	为单页面应用快速搭建繁杂的脚手架
vue	一套用于构建用户界面的渐进式框架
vue与其它框架的区别	knockout支持ie6 React有庞大的生态系统 vue 和 react 的共同点 1 都使用 virsual dom 2 提供了响应式和组件化的视图组件 3 注意力集中在核心库, 将其它功能如路由和全局状态管理交给其它库
	2019-03-03 个人感觉 双向绑定的事 不好加断点
	{{ message | capitalize }} 竖线是管道符 captitalize是定义在Vue里的过滤器 过滤器可以串联
v-on的缩写	<a @click='doSomething'></a>
自定义组件	Vue.component('runoob', { template: '<h1>自定义组件!</h1>' })
自定义组件的模板	// 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '<span>{{ message }}</span>' })
自定义指令	// 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) {    // 聚焦元素    el.focus() } })
路由	可用来实现多视图的单页Web应用 http://www.runoob.com/vue2/vue-routing.html   1 定义组件 2 配置文件 3 生成中控器 5 挂载
vue动画	transition
vue ajax	有两种 get post
reactive	在控制台app.product可直接变更数据
v-bind	指令
v-bind:title='message'	将这个元素节点的title特性和Vue实例的message属性保持一致
<p v-if='seen'>你现在看到我了</p>	控制p标签的显示
<li v-for='vo in products'>	也许 in 和 of 都能用
按钮点击	<button v-on:click='reverseHandler'>逆转消息</button>
	所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象
vm.a = data.a	两边同时变
阻止修改属性，并停止响应	var obj = { foo:'bar' } Object.freeze(obj); new Vue({ el:'#app", data:obj})
Vue的实例属性和方法	vm.$data vm.$el vm.$watch('a', function(newValue, oldValue) ) ;
有哪些生命周期钩子函数	beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed
钩子函数使用注意事项	不要用箭头函数
双大括号叫什么写法	Mustache
只能执行一次性插值	v-once
输出html	<span v-html='rawHtml'></span>
Mustache不能作用在html特性是怎么办	<div v-bind:id=“dynamicId”></div>
Mustache支持单语句 比如	{{ message.split('').reverse().join('') }}
v-bind的用法	后接html的属性，可响应式地更新html特性，比如<a v-bind:href='url'></a>
v-on	用于监听Dom事件 <a v-on:click="doSomething"></a>
v-bind动态参数的写法	v-bind:[attributeName]
v-bind:href的简写法	:href
v-on:click的简写法	@click
什么时候用计算属性	对于复杂的逻辑，都应该用计算属性
计算属性的语法	data:{     message:"Hello Vue" } computed:{      reverseMesssage:function(){           return this.message..... ;      } }
计算属性和方法各自的优点	计算属性 有缓存 当依赖源变化时才会重新计算（缺点是它不是响应式依赖） 方法 总会再次执行函数
计算属性和侦听属性	类似计算 fullname = firstName + secondName 时用计算属性开销更小
计算属性可设置 setter
侦听器适合在什么时候用	当需求在数据变化时执行异步 或 开销较大的操作时
领会debounce的用法	this.debouncedGetAnswer() this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
绑定样式	<div v-bind:class='{active:isActive}'></div>
数组语法	<div v-bind:class='[className1, className2]'/>
v-bind:style	<div v-bind:></div>
条件渲染	v-if v-else v-else-if v-show
v-if 和 v-show 的区别	v-if         切换开销高 ，适用于几乎不变的情况 v-show   初始开销高（后续只靠css），适于于频繁切换
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key='name'> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key='email'> </template>	注意不加key的时候  input label 都会被复用
v-if 和 v-for 哪个优先级更高	v-for 优先级更高
怎么取 v-for 的 index	v-for="(item, index) in items"
v-for 里 in 和 of	也许可以互相替换
v-for 的 key	<div v-for="item in items" :key="item.id">
如果刷新array的一个元素	Vue.set(vm.items, index, newValue) vm.items.splice( index, 1 , newValue ) ;
Vue不能监听 属性的添加或删除
添加响应式属性	Vue.set( vm.Object, 'age', 24 ) ; vm.$set( vm.Object, 'age', 23 ) ;
一次添加多个响应式属性	vm.profile = Object.assign( {}, vm.profile, {age:10, name:'a'} ) ;
修饰符有哪些	stop prevent capture self once passive
按键修饰符	keyup.enter keyup.page-down
按键码	keyup.13 keyup.enter keyup.tab keyup.delete keyup.esc keyup.space keyup.up keyup.down keyup.left keyup.right
系统修饰符	ctrl alt shift meta
@click.ctrl	只要有ctrl被按下就触发
@click.ctrl.exact	有且只有ctrl被按下时才触发
@click.exat	没有任何系统修改符被按钮下的时候才触发
鼠标按钮修饰符	left right middle
表单输入绑定	v-model 用于p textarea input-checkbox input-radio select   有修饰符 .lazy .number .trim
开始了解组件	组件的data必须是一个函数 因此每个实例可以维护一份被返回对象的独立的拷贝 data: function () { return { count: 0 } }
全局注册组件时 组件名的要求是	推荐用kebab （短横线间隔命名）不能有大写字母
定义组件的经验	先注册 Vue.component 画画<div> 渲染 new Vue({el:"#app-1"}) ;
向子组件传递数据	props
子组件向父组件传值	父组件 v-on:enlarge-text="postFontSize += 0.1" 子组件v-on:click=$emit('enlarge-text', 0.1)
插槽	slot   <div id="app-10"> <alert-box> Something bad happened </alert-box> </div>   <script>   Vue.component("alert-box", { template: `<div class="demo-alert-box"> <strong>Error!</strong> <slot></slot> </div>` });
动态组件
不同组件之间进行动态切换	v-bind:is = "AA"   <component v-bind:is="currentTabComponent"></component> 这个还需要翻墙看官方的例子
组件如何全局注册	Vue.component
局部注册	el:"#app" components:{ } 局部注册的组件在子组件里是不能用的   要想用，得这样写： var ComponentB = {     components:{          'component-B'     } }
只全局注册这些非常通用的基础组件	require.context
静态props 和 动态props	动态的就是v-bind:aaa=""
Prop 验证	不看了，去看书吧
全局自定义指令	Vue.directive("focus", { inserted: function (el) { el.focus(); } }); // 不太理解
局部自定义指令	new Vue({     el:"#app",     directives:{         focus:{             inserted: function(el){                  el.focus();             }          }     } })
指令定义函数的钩子函数举例	bind inserted update componentUpdated unbind
bind	只调用一次，指令每一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
inserted	被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于ducuments中）
update	被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
componentUpdated	被绑定元素所在模板完成一次更新周期时调用
unbind	只调用一次，指令与元素解绑时调用。
钩子函数的参数	el 指令所绑定的元素，可以用来直接操作DOM
binding 一个对象 包含以下属性	name 指令名 不包含 v- value 指令的绑定值  oldValue 指令绑定的前一个值，仅在update和componentUpdated中使用 expression 绑定值的表达式或变量变 arg 传给指令的 modifiers 一个包含修饰符的对象
vnode	Vue 编译生成的虚拟节点
oldVnode	上一个虚拟节点
什么时候会用到自定义指令	脑子就想到了一个 <input v-focus
路由的作用	实现多视图的单页Web应用 Single Page web application  SPAd
正在被导航的链接都会加上样式	class="router-link-exact-active router-link-active"
router-link有用属性	可带上 query  写法: <router-link :to="{path:'/bar', query:{plan:'private'}}">go to bar</router-link>   replace 不保留上条路径的 history <router-link :to="{ path: '/abc'}" replace></router-link>   append 在当前的路径基础上再行跳转   让Router-link以什么形式显示 <router-link :to="{ path: 'relative/path'}" tag="li" append>append</router-link>   设置激活的router-link的样式 active-class = "_active" ._active{    backgroud-color: red ; }   设置当链接被精确匹配时应该激活的class exact-active-class
Vue 过渡 动画	<transition name="fade"> <p v-show="show" v-bind:style="styleobj">动画实例</p> </transition>   没有看细节，先这样吧，不学了
Vue 混入的作用	定义了一部分可复用的方法或计算属性， 混入对象可以包含任意组件选项。 当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
vue 混入的实例	1 先定义混入对象 2 定义混入的类 -> 实例类
vue 混入的选项合并	new Vue({ mixins:[myMixin]}) ;  混入的时候，mixin里的优先级高
全局注册混入对象	Vue.mixin({ created: function () { var myOption = this.$options.myOption if (myOption) { console.log(myOption) } } })   new Vue({ myOption: 'hello!' })
vue ajax的方法有哪些	get head delete jsonp post put patch get( url, [options]).then( succssCbk, failCbk ) ;
Vue 响应接口	vm.$watch("counter", function(newValue, oldValue) 可用来监听字段变化
Vue.set Vue.delete
vue的各种常用库	<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
vuex	状态管理模式
Vue.use是什么意思	Vue.use(Router) 等 但 axios 不需要调用 Vue.use();
import getCdnAvatar from "@/utils/getCdnAvatar.js";	@是在webpack或者什么地方配置的， 表示根目录
Vue.config.productionTip = false;	为true时 会有生产提示 所以设为了 false
Vue.filter() 定义过滤器的方法	全局过滤器 Vue.filter()   组件过滤器 filters:{     capitalize:function(value){          if() ... 怎么怎么样     } }
过滤器可以用到哪里	双大括号里 或 v-model 里
el:"#app" 等于	.$mount( "#app" ) ;
render: h=>h(App) 的意思是直接把App渲染出来   等于	components: { App }    <App></App>
添加实例属性	Vue.prototype.$appName = ''; 这样 this.$appName 就可以访问了
axios 执行一个 get 请求	Vue.prototype.$http = axios ; this.$http.get('https://jsonplaceholder.typicode.com/users').then( (response)=>{ this.users = response.data ; })
可以自己任意定义全局方法	Vue.prototype.$reverseText = function( text ):String{ }
给select添加选项的方法	var x = document.getElementById("select_movie") var c = document.createElement("option"); c.text = vo.text ; x.options.add( c ) ;   查html css的例子要用 https://www.w3schools.com/jsref/coll_select_options.asp 我是用google搜到的这地址
fetch
带动画的图标	svg
加断点的方法	debugger
localStorage的使用方法	localStorage.getItem( 'local_name') ; localStorage.removeItem('local_name'); 最好配合 mounted 和 watch 来用