问题
|
回答
|
用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会被注册为一个全局变量
生产环境 用明确版本
|
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应用
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 来用
|
转载于:https://www.cnblogs.com/jason-beijing/p/10660151.html