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会被注册为一个全局变量
生产环境 用明确版本
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>
这个还需要FQ看官方的例子
组件如何全局注册
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的各种常用库
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 ) ;
 
我是用google搜到的这地址
fetch 
 
带动画的图标
svg
加断点的方法
debugger
localStorage的使用方法
localStorage.getItem( 'local_name') ;
localStorage.removeItem('local_name');
最好配合 mounted 和 watch 来用
 
 
 
 
 
 
 
posted @ 2019-04-05 22:01  jason_xiao  阅读(370)  评论(0)  编辑  收藏  举报