vue学习笔记

Posted 2020-09-01

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="变量名"></div>   v-bind缩写  <div :href="变量名"></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
　　　　　　　　}　　

　　　　　　}