首页 > 代码库 > vue学习笔记（一）
vue学习笔记（一）
vue学习笔记（一）
安装：
全局安装vue：npm install vue-cli -g
创建vue项目：vue init webpack <filename>
安装vue所需插件： vue install
启动项目： npm run dev
技术点：
<ul> //循环
<li v-for="item in items"></li>
</ul>
html字符串 <div v-html="html">这样浏览器才会解析 否则就会直接按照字符串渲染到页面上</div>
属性用变量 <div v-bind:href="http://www.mamicode.com/变量名"></div> v-bind缩写 <div :href="http://www.mamicode.com/变量名"></div>
data(){
return {
变量名：变量值
}
}
watch
// 不要在实例属性后者回掉函数中(如 vm.$watch("a",newVal => this.myMethod()))使用箭头函数，因为箭头函数绑定父上下文，所以this不会像预想的一样是Vue实例，而是this.myMethods未定义
vm.$watch("a",function(newVal, oldVal){
// 这个回掉是在vm.a 改变后调用
console.log(this.a); // 此时this指向vue对象
console.log(newVal); // 3
console.log(oldVal); // 1
});
watch: {
name(){
....
}
}
计算属性
computed: { // 写计算属性 将data计算后返回一个新的data
fullName: function(){
return this.firstName + " " + this.lastName;
}
}
事件绑定 <div v-on:prevent="preventName"></div> v-on 缩写 <div @click="preventName"></div>
methods: { // 事件处理
preventName(){
...
}
}
修饰符
// .lazy 可以转变在change事件中同步
// .number 自动过滤number
// .trim 过滤掉收尾空格
// 事件修饰符
// .prevent 告诉v-on指令对于触发事件调用event.prevrntDefault()
// .stop 阻止单机事件冒泡
// .submit 提交事件不再重复加载页面
// .prevent 阻止默认事件
// .capture 添加事件侦听器使用事件捕捉模式
// .self 只当事件在该元素本身（而不是子元素）触发时触发回掉
// .once 只执行一次
//按键修饰符
// v-on:keyup.13="" 只有在keycode为13时触发
// .enter
// .tab
// .delete 删除或退格
// .esc
// .space
// .up
// .down
// .left
// .right
// .ctrl
// .shift
// .alt
// .meta
过滤器 <div>{{message | capitalize }}</div>
filters: {
capitalize(value){
return newValue
}
}
vue学习笔记（一）