vue学习笔记

Vue学习笔记

Vue初始化对象

var vm = new Vue({
    el:"#box",  //绑定的元素
    template:"<h1>{{money}}</h1>",  //使用的模板
    data:function () {  //绑定的数据
        return{
            money:"123"
        }
    }
})

data和methods里面的属性都是Vue这个实例对象的代理属性,例:vm.money = 123;

而vm本来的自身属性则是vm.el,vm.template,vm.data,会用符号区分开来,就是内置的自带的属性和方法

var vm = new Vue({
//        el:"#box",  //绑定的元素
    data:function () {  //绑定的数据
        return{
            age:12
        }
    }
}).$mount("#box");

mount是一种手动挂载的方法option可以读取vue实例对象上面的静态方法和属性,也就是自定义方法和属性
$log查看数据的一个状态

注意，不要在实例属性或者回调函数中使用箭头函数,因为箭头函数会绑定父级的上下文,会导致里面的this不会指向Vue实例

Vue实例对象的声明周期

渲染方式

文本插值

<div id="box" >
    {{money}}
</div>

单次渲染 v-once

<div id="box">
    <button @click="changeData">456</button>
    <span v-once>{{money}}</span>
</div>

渲染html v-html

<div id="box">
    <span v-html="money"></span>
</div>

注意点:v-html是渲染html片段的,里面数据绑定会被忽略

属性绑定 v-bind

vue中的属性绑定和ng的有些不一样,ng的可以在属性上随意添加插值语法,但是在vue中不可以,要利用v-bind绑定属性,传入的也可以是布尔值

<div id="box">
    <span v-bind:title="money">{{money}}</span>
    <input type="radio" v-bind:checked = "true">
</div>

简写:

    <span :title="money">{{money}}</span>

事件处理器

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

传入$event可以操作dom节点
vue提供了一些内置修饰符也可以操作dom节点

  • @click.stop阻止事件冒泡
  • @click.prevent阻止事件默认行为
  • @keydown/@keyup后面可以点键码(@keydown.13),可以点英文(@keydown.enter)

表单控件

表单控件多数利用v-model来实现数据的双向绑定
多个勾选框绑定到同一个数组

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

new Vue({
    el: '...',
    data: {
    checkedNames: []
    }
})

指令的一些注意事项和注意点

  • v-model和ng-model作用一样,都是实现数据双向绑定的,但是有一个区别就是,ng-model绑定的对象可以不用声明,但是v-model绑定的对象一定要声明

  • v-if有时候要切换多个元素的时候,可以用template

      <template v-if="true">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
  </template>

    并且template并不会被显示出来;也可以和if-else,v-else-if配合使用,if-else,v-else-if要紧挨着v-if的元素

  • computed能做到的事情,methods也能做到,那么两者有什么区别呢?
    computed会把计算结果保存在缓存当中,只有计算的值发送变化了才会重新计算,但是methods只要重新渲染就会重新计算,两者的区别在于你是否希望保存到缓存当中并读取它.

  • vue为了提高渲染速度,通常会复用已有元素而不是从头开始渲染

      <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username">
  </template>
  <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address">
  </template>

    例如上面的代码,当切换到email的时候,input里面的数值还是会存在,因为复用了这个元素
    这种方式有一定的好处和坏处,当你需要分开这两个input的联系的时候,可以在input上添加一个唯一的key,vue就会重新渲染,不会复用前一个input

  • v-show和v-if的区别
    v-show和v-if同ng-show和ng-if很类似,v-if是惰性的,只要不需要它的时候,这个元素就不会被渲染,直到首次需要它的时候,而v-show不一样,不管需不需要它,都会被渲染出来,之后css的display隐藏它,但是v-if切换所耗费的性能比较多,v-show耗费的性能比较少,所以如果元素需要不断切换的还是利用v-show比较好,只要出现一次,不用频繁切换的则用v-if

  • v-for遍历数据
    (item,key) in array,vue里面是item在前面,key在后面,v-for的优先级会比v-if的优先级高
    v-for遍历数据可以设置一个template然后遍历,这样浏览器并不会读取这个template模板标签

      <template v-for="product in productList">
        <h3>{{product.title}}</h3>
        <ul v-for="item in product.list">
            <li>
                <a :href="item.url">{{item.name}}</a>
            </li>
        </ul>
        <div v-if="!product.last" class="hr"></div>
  </template>

  • :class的使用
    :class和ng-class的使用方法差不多,:class="{'red':true}"
    还可以和数组混搭
    :class="[{'red':true},'bule']" 这样有bule一个类,red会判断是否添加

  • 当使用js吧图片的src利用v-bind绑定到图片上的时候,要利用require,否则会拿不到图片

v-model.lazy方法就是当失去焦点时才刷新数据的绑定,有利于性能的提升

计算属性computed

虽然插值语法也是可以解析js的代码的,但是一些复杂的计算都写在插值语法上会导致模板不清晰和逻辑复杂,稍微复杂的计算都尽量写在计算属性当中,改变计算前的数据,计算后的数据也会实时跟着改变的

<div id="box">
    <span>{{message}}</span>
    <span>{{reversedMessage}}</span>
</div>

var vm = new Vue({
    el:"#box",  //绑定的元素
    data:function () {  //绑定的数据
        return{
            message:"<h1>123456789</h1>"
        }
    },
    computed:{
        reversedMessage:function () {
            return this.message.split('').reverse().join('');
        }
    }

});

computed:{
        reversedMessage:{
            get:function () {
                return this.message.split('').reverse().join('');
            },
            set:function () {
                this.message+=1;
            }
        }
    }

computed完整的写法有两个,一个是get获取数值,一个是set设置数值

Vue手动监听属性变化

vue也有一个类似angular的$watch属性,可以监听数据的变换

vm.$watch("red",function () {
    alert("发生变化了");
});

但这种方法是一种浅监听,如果遇到对象类型里的某个属性变化就会监听不到了
这时候要利用vue的一个深监听

vm.$watch("people",function () {
    alert("发生变化了");
},{deep:true});

发送网络请求

vue并没有内置http请求的东西,所以要发送http需要导入vue-resource,导入之后就可以使用$http请求了
利用get请求数据

methods:{
        get:function () {
            this.$http.get("a.txt").then(function (res) {
                res.status //是状态码,成功一般200
                res.data  //res.data才是结果
                alert("成功了");
            },function () {
                alert("失败了");
            })
        }
    }

利用get发送数据

methods:{
        get:function () {
            this.$http.get("get.php",{
                a:1,
                b:2
            }).then(function (res) {
                alert(res.data);
            },function () {
                alert("失败了");
            })
        }
    }

利用post上传数据

post:function () {
            this.$http.post("post.php",{
                a:1,
                b:2
            },{
                emulateJSON:true
            }).then(function (res) {
                alert(res.data);
            },function () {
                alert("失败了");
            })
        }

一般在created里面执行数据的请求

created:function () {
    this.$http.get("static/08-Ajax-get.php").then((data) =>{
        this.data = data;
    },(err)=> {
        console.log(err);
    })
}

最好利用es6的箭头函数,保证this是外部的this

Vue生命周期(钩子函数)

网上找到一张非常棒的图

Vue组件

Vue的组件其实就等于新建了一个对象,一样享有template,data,methods等方法
生成组件的几种方式

var Aaa = Vue.extend({
    template:"<h1>i am h1</h1>"
});
Vue.component("aaa",Aaa);

通过Vue对象生成组件

Vue.component("my-header",{
    template:"<p>this is my header</p>"
});

生成组件然后绑定

var myHeader = {
    template:"<p>this is my header</p>"
};

new Vue({
    el:"#box",  //绑定的元素
    data:function () {  //绑定的数据
        return{
            money:"123"
        }
    },
    components:{
        "my-header": myHeader
    }
})

作用域
组件之间的作用域都是独立的,意味着子组件不能获取到父组件上面的数据

Vue.component("my-child",{
    props:['message'],
    template:"<div>{{message}}</div>"
});

props:{
    slides:{
        type:Array,
        default:[]  //如果没传入,默认为一个空数组
    },
    interval:{
        type:Number,
        default:1000  //如果没传入,默认为1000毫秒
    }
}

<my-child :message="colorArr"></my-child>

这种方式就可以从父组件上面获取数据,先声明props然后用:message来接收,props还有另外一种方式

Vue.component("my-child",{
    props:{
        'message':String,
        'myMsg':Number
    },
    template:"<div>{{message}}</div>"
});

这种方式会限定传进来数据的格式,如果格式不对,就传不进来了

同样,父组件也是不能获取到子组件上面的数据的
先是利用子组件$emit事件吧数据传递出去

<child @emit-msg="get"></child>//触发emit-msg的传递方法,get是要父组件调用的方法的名称

在子组件中

this.$emit("emit-msg",this.msg);//第一个参数是传递方法的名称,第二个是数据

在父组件中

get:function (m) {
    this.msg = m;  //获取到的m就是从子组件上面传递过来的数据
}

注意点:如果要在父组件上面获取的方法里面传入参数,例如这样

 <v-selection :selections="buyTypes" @on-change="onParamChange('buyType',$event)"></v-selection>

如果有另外传入的参数,那么本来从子组件里面传过来的参数就会获取不到,所以要加一个$event参数,就可以获取得到原本传过来的参数了

去github搜索awesome-vue里面可以搜到许多组件!!!!!!!!!!!!!!

渲染的方式

<my-header></my-header>

但是在一些标签内,例如table,ul,等标签内可能会导致这样的渲染方式失效,也有另外的方法

<table>
    <tr is="my-row"></tr>
</table>

绑模板的方式

  • 第一种直接写在template里面

  • 第二种写在script里面type="x-template" id=名称

    <script type="x-template" id="aaa">
    <h1 @click='myAlert()'>{{msg}}</h1>
    </script>
    然后template里面写入id名称就可以了

      template:"#aaa"

  • 第三种写在一个template标签里面,和第二种有些类似

      <template id="aaa">
      <h1 @click='myAlert()'>{{msg}}</h1>
  </template>

在绑定

有些时候,模板标签里面可能也会有东西,为了不要让模板的内容完全覆盖标签里面的东西要利用到slot这个标签
渲染模板里面

<div id="box" >
    <aaa>
        这里这里这里
    </aaa>
</div>

如何才能保留"这里这里这里"同时又能渲染模板呢
这是aaa的模板

<template id="aaa">
    <div>
        <slot></slot>   //slot里面就是aaa标签里面原有的东西
        <h1>我是aaa的模板</h1>
        <slot></slot>   //这里可以放置多个,可以渲染多次
    </div>
</template>

当出现多个模板的时候,可以分配那个slot展示的是哪一块

<aaa>
    <ul slot="ul-slot">
        <li>uuuuu</li>
        <li>uuuuu</li>
        <li>uuuuu</li>
        <li>uuuuu</li>
    </ul>
    <ol slot="ol-slot">
        <li>oooo</li>
        <li>oooo</li>
        <li>oooo</li>
        <li>oooo</li>
        <li>oooo</li>
    </ol>
</aaa>

<div>
    <slot name="ol-slot"></slot>
    <h1>我是aaa的模板</h1>
    <slot name="ul-slot"></slot>
</div>

动态组件

<component :is="tem"></component>

用一个component标签,可以是:is或者is,is就填入不变的字符串,:is就可以填入vue实例的变量,达到动态切换的效果

自定义过滤器

Vue.filter("todo",function (input) {
    return input<10?"0"+input:input;
});

<p>{{age | todo}}</p>

自定义指令

自定义指令扩展了html语法

Vue.directive("red",function (el) {
    el.style.background = "red";//el就是绑定的元素
});

使用方式

<p v-red></p>

Vue-router

引入组件

import VueRouter from "vue-router"
Vue.use(VueRouter)
routes:[
          {
              path:"/",
              component:IndexPage
          },
          {
              path:"/detail",
              component:DetailPage,
              redirect:"/detail/analysis",  
              //这样一进入detail就会去到analysis页面,不会出现空白的页面
              children:[
                  {
                      path:"analysis",   //这里不写'/',写了'/'会默认是跟目录的
                      component:DetailAnalysis
                  },
                  {
                      path:"count",
                      component:DetailCount
                  },
                  {
                      path:"forecast",
                      component:DetailForecast
                  },
                  {
                      path:"publish",
                      component:DetailPublish
                  }
              ]
          }
     ]

<router-link>是用来跳转路由的指令

<router-link v-for="item in products" :to="item.path" tag="li" active-class="active">{{item.name}}</router-link>
//v-for遍历几个需要跳转的入口,to就是跳转到哪个路由上,tag就是这个标签会以什么html标签渲染,不写的话默认是a标签,acive-class就是选中的样式,不设定的话会默认有个router-link-active类的

获取当前路由地址this.$route.path 注意这里是没有r的!!!!!!!!!!!!!

this.$router.push({path:"/detail"})可以使路由跳转

浏览器插件

Vue-devtools

在vue中引入jquery插件

https://segmentfault.com/a/1190000007020623

登录框的时候可以用computed监听输入框的规则

computed:{
        userError(){
            let errorText, status;
            if(this.usernameModel.length<6 ){
                status = false;
                errorText = "不能小于6位"
            }else{
                status = true;
                errorText = "";
            }
            if(!this.userFlag){
                errorText = "";
                this.userFlag = true;
            }
            return {
                status,
                errorText
            }
        },
        passwordError(){
            let errorText, status;
            if(this.passwordModel.length<6 ){
                status = false;
                errorText = "密码不能小于6位"
            }else{
                status = true;
                errorText = "";
            }
            if(!this.passwordFlag){  //因为没有在页面渲染,所以也不用声明
                errorText = "";
                this.passwordFlag = true;
            }
            return {
                status,
                errorText
            }
        }
    }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,457评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,837评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,696评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,183评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,057评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,105评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,520评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,211评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,482评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2赞 335

推荐阅读更多精彩内容

  • Vue.js学习笔记-基础部分+完整实现代码
    下载安装搭建环境 可以选npm安装，或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时，控制...
    冥冥2017阅读 6,015评论 0赞 42
  • Vue 学习笔记
    项目脚手架 在这里我使用vue-cli来进行安装 查看项目结构，index.html/main.js是项目入口，A...
    等酒香醇V阅读 708评论 0赞 1
  • Vue 学习笔记
    个人基于对 Vuejs 的学习制作了一个 Todo 单页应用 Lightodo，功能包括：添加待办事项卡片，对卡片...
    AlessiaLi阅读 21,531评论 16赞 308
  • Vue学习笔记入门篇——组件杂项
    本文为转载，原文：Vue学习笔记入门篇——组件杂项 动态组件 通过使用保留的 <'component'> 元素，动...
    ChainZhang阅读 417评论 0赞 0
  • 前言
    想不开的时候就想写小说。特别想不开的时候就会想写玛丽苏。写女主智勇双全人见人爱花见花开除了脑子一根筋非要跟主角做对...
    专业负心三仟年阅读 172评论 0赞 2