Vue基础知识总结（二）
一、解决网速慢的时候用户看到花括号标记
（1）v-cloak，防止闪烁，通常用于比较大的选择器上。
给元素添加属性v-cloak，然后style里面：[v-cloak]{display:none;}
（2）{{msg}}，等价于<span v-text="msg"></span>
（3）{{{msg}}}，html转意输出，等价于<span v-html="msg"></span>（在v2.0上，三括号已经删除）
二、计算属性的使用：
（1）注意：计算属性computed的写法方式是跟methods是一样的，但是computed是属性，可以直接拿来当属性使用，而methods是方法
（2）计算属性的值取决于函数的返回值，这样函数里面就可以写相应的业务逻辑
（3）2种方式：
//1、默认get方式
new Vue({
el:'#box',
data:{
a:
},
computed:{
b:function(){
//业务代码逻辑
return this.a + ; //计算属性b的值取决于return的值
}
}
});
//2、完整写法：有get和set
computed:{
b:{
get:function(){
return this.a + ;
},
set:function(val){//val即为给计算属性b赋的值
this.a=val;
}
}
}
三、vue实例自带的简单方法
vm.$el 就是指定的el元素
vm.$data 就是data对象
vm.$mount(el)手动挂载元素
vm.$options 获取自定义属性或方法（vm.$options.aa，vm.$options.show()）
vm.$destroy 销毁对象
vm.$log() 查看现在数据的状态
四、循环
（1）循环有重复的数据怎么办？加track-by="索引或uuid"，还会提高循环的性能
<li v-for="value in arr" track-by="$index">{{value}}</li>
五、过滤器
1、跟json串使用：json，类似于JSON.stringify，如果属性是json对象的时候，用于将json对象序列化显示
2、跟事件配合使用：debounce 2000，延迟执行
3、跟数组配合适用的过滤器：
limitBy 2 1，限制取几个数据，有两个参数：limitBy 取几个 从哪开始（索引）
filterBy 'a'，按字符过滤包含给定字符的数据
orderBy 1（正序，-1倒序），排序用
4、自定义过滤器：常规的model—过滤—view
语法：Vue.filter(name,function(arguments){})
<div id="box">{{a | toDou }}</div>
Vue.filter('toDou',function(input,a,b){
alert(a+','+b);//input即传a值，a/b依次为1、2
return input<?''+input:''+input;
});
5、双向过滤器：完整的写法，默认的写法就是一般默认是read
//<h2>welcome</h2>
Vue.filter('filterHtml',{
read:function(input){ //model-view
alert();
return input.replace(/<[^<]+>/g,'');
},
write:function(val){ //view -> model
console.log(val);
return val;
}
});
六、自定义属性指令
Vue.directive(指令名称,function(接收参数){ this.el — 原生的dom对象})
<div v-red="参数"></div>，传参数
指令名称：v-red，那么对应的是red；指令必须以 v- 开头，否则不生效
//拖拽指令自定义
Vue.directive('drag',function(){
var oDiv=this.el;
oDiv.onmousedown=function(ev){
var disX=ev.clientX-oDiv.offsetLeft;
var disY=ev.clientY-oDiv.offsetTop; document.onmousemove=function(ev){
var l=ev.clientX-disX;
var t=ev.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
};
});
//带参数指令
Vue.directive('red',function(color){
this.el.style.background=color;//color接收参数red
}); <span v-red="'red'">{{msg}}</span>
自定义元素指令：语法不一样
//自定义元素指令，用处不大
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
}); <div id="box">
<zns-red></zns-red>
</div>
七、自定义键盘信息
Vue.directive("on").keyCodes.ctrl=17
那么就可以这么使用了：@keydown.ctrl="show"，按ctrl键触发
八、监听数据变化
vm.$watch(name,function(){})，浅度监视，适用于name为基础类型
vm.$watch(name,function(){},{deep:true})，深度监视，适用于name为基础类型和引用类型
九、Vue组件
1、组件创建注册步骤：
2种编写方式
Vue.extend()、Vue.component()、在el下面使用
注意：Vue.extend()里面可以放模板、data、methods，完全跟new Vue()实例一样。Vue.extend()就相当于Vue的一个构造函数，但是需要注意的是，如果里面需要放data数据的时候，data需要是一个函数，而且必须return一个对象，该对象就跟new Vue()里面的data对象一样。
//创建组件构造器
var Aaa=Vue.extend({
data(){
return {
msg:"MyMsg"
}
},
methods:{
click:function(){
this.msg = "changed";
}
},
template:'<h3 @click="click">{{msg}}</h3>'
});
//注册组件
Vue.component('aaa',Aaa);
var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});
2、全局组件和局部组件
3、模板编写方式：
script引入方式，改type类型
直接template标签，template标签里必须包含html标签
4、动态组件：<components :is="组件名称"></components>
5、父子组件及父子组件通信
6、父组件获取子组件数据：下面这四步
其本质是：子组件把自己的数据发送到父级
子组件发送用vm.$emit("事件名称","数据名称")，父组件接收用v-on
<body>
<div id="box">
<aaa></aaa>
</div>
//模板数据
<template id="aaa">
<span>我是父级 -> {{msg}}</span>
//3、父组件绑定接收事件，接收的一边是子组件里的事件名，一边是父组件里面需要定义的事件名
<bbb @child-msg="get"></bbb>
</template>
<template id="bbb">
<h3>子组件-</h3>
//1、子组件绑定发送事件
<input type="button" value="send" @click="send">
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:,
msg2:'我是父组件的数据'
}
},
template:'#aaa',
methods:{
//4、父组件接收子组件发送的数据，作为参数，改变自己里面数据
get(msg){
this.msg=msg;
}
},
components:{
'bbb':{
data(){
return {
a:'我是子组件的数据'
}
},
template:'#bbb',
methods:{
send(){//2、子组件通过$.emit主动发送数据a到父级
this.$emit('child-msg',this.a);
}
}
}
}
}
}
});
</script>
</body>
十、组件里的slot作用：
slot：位置、卡槽，主要用于占位置
1、单个slot的情况，可以默认给个默认的情况，然后组件里面没有其他元素就显示默认情况；如果有其他元素就显示元素情况
2、多个slot的情况，得区分谁是谁的问题。需要给slot名字，并且可以随意跳动位置
//模板
<aaa>
<ul slot="ul-slot"></ul>
<ol slot="ol-slot"<</ol>
</aaa>
//slot名字与上面对应即可
<template>
<h1>多个slot</h1>
<slot name="ul-slot"></slot>
<slot name-"ol-slot"></slot>
<p>多个slot结束</p>
</template>
十一、Vue路由：根据不同url地址，请求不同组件
1、SPA应用：单页面应用。下面8步记住：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<script src="bower_components/vue-router/dist/vue-router.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<a v-link="{path:'/home'}">主页</a>//1、需要有跳转链接：home、news分别对应一个组件
</li>
<li>
<a v-link="{path:'/news'}">新闻</a>
</li>
</ul>
<div>
<router-view></router-view>//2、需要有展示内容区
</div>
</div>
<script>
//3. 准备一个根组件
var App=Vue.extend();
//4. Home News组件都准备
var Home=Vue.extend({
template:'<h3>我是主页</h3>'
});
var News=Vue.extend({
template:'<h3>我是新闻</h3>'
});
//5. 准备路由
var router=new VueRouter();
//6. 关联映射
router.map({
'home':{
component:Home
},
'news':{
component:News
}
});
//7. 启动路由：将根组件，盒子是box
router.start(App,'#box');
//8. 跳转：设定默认使用哪个组件
router.redirect({
'/':'home'
});
</script>
</body>
</html>
点击之后会加class：v-link-active，可以以这个class加一些样式
2、路由嵌套（多层路由）
主要需要用到subRoutes
component:Home,
subRoutes:{
'login':{
component:{
template:'<strong>我是登录信息</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册信息</strong>'
}
}
}
3、需要拿到路由的其他信息
/details/:id/age（名字）/:age（值），给路径加参数
{{$route.params | json}}，当前所有参数
{{$route.path}}，当前路由路径
{{$route.query | json}}，当前路由的数据
十二、vue-loader
后台：nodeJs —— require，export
broserify，模块加载，只能加载js
webpack，模块加载器，一切东西都是模块，最后打包到一块
vue-loader基于webpack
1、.vue文件：放置的是vue组件代码。由三块构成
<template>html代码</template>
<style>css代码</style>
<script>js代码</script>
Vue基础知识总结（二）的更多相关文章
- Java JDBC的基础知识（二）
在我的上一篇Java JDBC的基础知识(一)中,最后演示的代码在关闭资源的时候,仅仅用了try/catch语句,这里是有很大的隐患的.在程序创建连接之后,如果不进行关闭,会消耗更多的资源.创建连接之 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础知识之vue-resource和axios
Vue基础知识之vue-resource和axios 原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- LeetCode刷题191130 --基础知识篇 二叉搜索树
休息了两天,状态恢复了一下,补充点基础知识. 二叉搜索树 搜索树数据结构支持许多动态集合操作,包括Search,minimum,maximum,predecessor(前驱),successor(后继 ...
- Ajax基础知识（二）
接上一篇 Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...
- HTTP基础知识（二）
接着上一章的内容:HTTP基础知识(一) 二.简单的HTTP协议 1.客户端:请求访问文本或图像等资源的一端称为客户端: 服务器端:提供资源响应的一端 2.以百度为例子 这是请求头: 在起始行 ...
- Vue基础知识简介
基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...
- XML的相关基础知识分享(二)
前面我们讲了一下XML相关的基础知识(一),下面我们在加深一下,看一下XML高级方面. 一.命名空间 1.命名冲突 XML命名空间提供避免元素冲突的方法. 命名冲突:在XML中,元素名称是由开发者定义 ...
- python基础知识（二）
以下内容,作为python基础知识的补充,主要涉及基础数据类型的创建及特性,以及新数据类型Bytes类型的引入介绍
随机推荐
- 从setting文件导包
两种方式 from project.settings.py import s3_key 第二种: from django.conf import setting s3_key = settings.S ...
- Ubuntu破解开机密码
使用Ubuntu和使用windows系列产品一样,会忘记开机密码.难道我们在忘记开机密码的时候就必须重装系统吗?当然不是了!既然在windows下面我们可以破解开机密码,那么在Ubuntu里面一样可行 ...
- 【Shell 编程基础第二部分】Shell里的流程控制、Shell里的函数及脚本调试方法！
http://blog.csdn.net/xiaominghimi/article/details/7603003 本站文章均为李华明Himi原创,转载务必在明显处注明:转载自[黑米GameDev街区 ...
- RabbitMQ消息队列（四）: 消息路由
1. 路由: 前面的示例中,我们或得到的消息为广播消息,但是无法更精确的获取消息的子集,比如:日志消息,worker1只需要error级别的日志, 而worker2需要info,warning,err ...
- Java坦克大战 (三) 之可完全控制坦克朝八个方向运动
本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...
- 搜索引擎--范例：谈谈django--mysql数据库的一些常用命令
现在基本没有什么能离得开数据库了,django我一直用的都是mysql的数据库,这次和大家说说django--mysql数据库的一些常用命令吧 1:命令行登陆mysql C:\Users\Admini ...
- ssm框架整合配置文件
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- Django 在 view 中使用 Paginator分页插件
1.在 view 中使用 Paginator def query(request,sql): # 创建连接 connection = pymysql.connect(**config) try: wi ...
- [thinkphp] 公共头部底部如何传递数据
分组底下有一个公共模板文件夹 Modules/Index/Tpl/public/ 如何传递数据给模板呢? 在 入口文件/Lib/Action/ 中创建类CommonAction.class.php ...
- (21)python Anaconda
1.安装 Anaconda下载镜像 --官网下载太慢 https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ 下载安装后 2.添加第三方源 管 ...