Vue--基础2
Vue--基础2
vue成员获取
- 当获取Vue对象中的的成员里面的值的时候, 可以直接通过变量名直接进行获取
- 当获取Vue对象中的成员时, 可以通过
$成员名进行获取, 但此时拿不到methods以及自定义的成员 - 最终可以通过
$options.成员名获取Vue对象成员所有的内容
<body>
<div id="app">
<h1 @click="btn_click">{{ msg }}</h1>
<p>{{ num | add }}</p>
<p>{{ $data }}</p>
<p>{{ $options.arr }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
msg: '消息',
num: 20,
},
methods: {
btn_click(){
console.log(this.msg)
console.log(this.$data)
// console.log(1, this.el)
}
},
filters:{
add(v){
console.log(v);
return v * v
}
},
arr: [1,4,5,7,3]
});
console.log(app.msg);
console.log(app.$data);
console.log(app.$options.methods);
console.log(app.$options.arr);
</script>
分隔符成员
分隔符成员主要是进行差值表达式的符号重定义, 以便不与其他的模板语言造成混淆，比如django中的模板语言也是通过{{ }}进行变量渲染，所以我们可以通过delimeters分隔符成员进行重定义
<body>
<div id="app">
<!--{{ msg }}-->
<!--[[ msg }}-->
${ msg }
</div>
</body>
<script src="js/vue.js">
new Vue({
el: '#app',
data: {
msg: 'message'
},
// 修改插值表达式符号
// delimiters: ['[[', '}}'],
delimiters: ['${', '}'],
})
</script>
计算属性成员
什么是计算属性
在vue插值表达式中，我们可以进行一些简单的运算，在模板中放入太多的逻辑会让模板过重且难以维护。例如：
放在插值表达式中：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
这里的表达式包含3个操作，并不是很清晰，所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。
计算属性的用法
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以
上面的的例子可以重写一下
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p> //我们把复杂处理放在了计算属性里面了
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
});
</script>
/*
运行结果：
Original message: "Hello"
Computed reversed message: "olleH"
*/
除了上例简单的用法，计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
<body>
<div id="app">
<button @click="add()">补充货物1</button>
<div>总价为：{{price}}</div>
</div>
</body>
var app = new Vue({
el: '#app',
data: {
package1: {
count: 5,
price: 5
},
package2: {
count: 10,
price: 10
}
},
computed: {
price: function(){
return this.package1.count*this.package1.price+this.package2.count*this.package2.price //总价随着货物或价格的改变会重新计算
}
},
methods: { //对象的方法
add: function(){
this.package1.count++
}
}
});
注意：
- 计算后属性不需要在data中重复定义；
- 计算后属性必须渲染后，绑定的方法才会生效；
- 计算后属性绑定的方法中的任意变量值更新，方法都会被调用；
- 计算后属性为只读属性(不可写)
- 计算属性可以依赖其他计算属性
- 计算属性不仅可以依赖当前Vue 实例的数据，还可以依赖其他实例的数据
监听属性成员
监听属性，即监听data中的属性，当属性发生变化的时候，就会触发这个方法，只要监听的属性发生变化，就会触发
- 监听绑定的属性，该属性可以get、set；
- 只要监听的属性发生变化，绑定的方法就会被调用
注意点：监听的属性需要在data中定义
<body>
<div id="app">
<input type="text" v-model="num_a">
<p>num_a: {{ num_a }}</p>
<p>num_b: {{ num_b }}</p>
<p>num_c: {{ num_c }}</p>
</div>
</body>
<script src="js/vue.js">
new Vue({
el: '#app',
data: {
num_a: '',
num_b: '',
num_c: '',
},
watch:{
num_a() {
this.num_b = this.num_a * 2;
this.num_c = this.num_b *5
}
}
})
</script>
组件
组件的介绍
组件就是一个虚拟DOM，在渲染的时候会替换真实DOM，但是组件本身可以有自己的data和方法，就相当于python中的类，具有自己的类属性和方法
- 组件都有自己的template（虚拟DOM），最后要替换掉真实DOM
- 挂载点el，在根组件没有规定template，用挂载的真实DOM拷贝出虚拟DOM，完成实例创建后再替换掉真实DOM(渲染)，但是在根组件规定template，就采用自己的template作为虚拟DOM，挂载点还是必须的，用于占位
- template只能解析一个根标签
- 所有 new Vue() 产生的组件都称之为根组件 ---> 项目开发时，整个项目只有一个根组件
组件的优点：
- 组件是由template + css + js三部分组成
- 具有复用性，减少代码的冗余
- 复用组件时，需要注意组件之间的数据隔离，但是方法不需要隔离，因为调用相同的方法使用的数据不一样，产生的结果也不一样
局部组件
局部组件只能在引入当前的vue实例中有效，在当前vue实例中components属性加上引入进来的组件实例即可
创建局部组件步骤：
- 创建组件
- 注册组件
- 渲染组件
<div id="app">
{{msg}}
<!-- 3 渲染组件 -->
<local-comp></local-comp>
</div>
<script>
// 1 创建组件
let localComp = {
template: "<div>我是局部组件</div>"
};
new Vue({
el: "#app",
data: {
msg: "hello component"
},
// 2 注册组件
components: {
localComp
}
});
</script>
全局组件
使用Vue.component进行全局注册，所有vue实例都会共享此组件，不需要在Vue示例中在进行注册
创建全局组件步骤：
- 创建组件
- 渲染组件
<div id="app">
{{msg}}
/<!-- 2 渲染组件 -->
<const-comp></const-comp>
</div>
<script>
// 1 创建组件
Vue.component('constComp', {
template: "<h3>我是全局组件</h3>"
});
new Vue({
el: "#app",
data: {
msg: "hello component"
}
});
</script>
组件复用的数据隔离
<body>
<div id="app">
<local-tag></local-tag>
<global-tag></global-tag>
</div>
<div id="main">
<local-tag></local-tag>
<global-tag></global-tag>
</div>
</body>
<script src="js/vue.js">
// 局部组件
let localTag = {
template: `
<div @click="click1" class="ad">
<img src="img/mn.jpg" alt="">
<h4>美女被点了{{ num }}下</h4>
</div>
`,
// 除了根组件，数据都是函数的返回值字典
data () { // 组件被复用一次，就会产生一套属于自己的数据字典
return {
num: 0
}
},
methods: {
click1() {
this.num ++
}
},
};
// 全局组件
Vue.component('global-tag', {
template: `
<div class="ad" @click="click2">
<img src="img/mn.jpg" alt="">
<h4>共享{{ count }}次美女</h4>
</div>
`,
data() {
return {
count: 0
}
},
methods: {
click2() {
this.count ++
}
}
});
new Vue({
el: '#app',
components: {
localTag
}
});
new Vue({
el: '#main',
components: {
localTag
}
});
</script>
组件之间的数据交互
vue组件的通信是vue组件的核心，组件不仅仅是要把模板的内容进行复用；更主要的是组件间要进行通信；组件之间的通信数据传递是组件的生命力之一。
父组件向子组件传递数据
子组件可以通过props接受父组件传过来数据
props可以是一个数据类型也可以是一个数组，也可以是对象，如果作为对象，数据有3个属性type,default,require。其中default，require值都是布尔类型值。type有Number, String, Boolean, Array, Object, Function，Symbol。
如果props数据是对象或数组时默认值default必须是一个函数来返回初始化数据。
步骤
- 父组件提供给数据
- 在父组件模板中，为子组件标签设置自定义属性绑定父级数据
- 在子组件props成员中，接收自定义属性
- 在子组件模板和方法中，使用自定义属性名就可以访问父级数据
<body>
<div id="app">
<local-tag :ad_dic="ad" v-for="ad in ads" :key="ad.img"></local-tag>
</div>
</body>
<script src="js/vue.js">
let localTag = {
props: ['ad_dic'],
template: `
<div class="ad">
<img :src="ad_dic.img" alt="">
<h4>{{ ad_dic.title }}</h4>
</div>
`,
};
// 模拟后台的数据
let ads = [
{
'img': 'img/001.png',
'title': '小猫'
},
{
'img': 'img/002.png',
'title': '黄蛋'
},
{
'img': 'img/003.png',
'title': '蓝蛋'
},
{
'img': 'img/004.png',
'title': '短腿'
},
];
new Vue({
el: '#app',
data: {
ads, // 后期项目是后台返回的数据
},
components: {
localTag
}
})
</script>
子组件向父组件传递数据
自定义事件$emit，子组件向父组件通信
步骤：
- 子组件提供数据
- 子组件通过系统事件激活自己的绑定方法，发送一个自定义事件，携带自身数据
- 在父组件模板中的子组件标签中为自定义事件绑定父组件方法
- 父组件实现方法获取到子组件数据
<body>
<div id="app">
<p>
<input type="text" v-model="info">
<button @click="add_msg">留言</button>
<ul>
<msg-tag @del_action="del_li" :msg="msg" :index="i" v-for="(msg, i) in msgs" :key="msg"></msg-tag>
</ul>
</p>
</div>
</body>
<script src="js/vue.js">
let msgTag = {
props: ['msg', 'index'],
template: `
<li>
<span @click="del_fn" class="del">x</span>
<span>{{ msg }}</span>
</li>
`,
methods: {
del_fn() {
this.$emit('del_action', this.index)
}
}
};
new Vue({
el: '#app',
components: {
msgTag
},
data: {
info: '',
msgs: JSON.parse(sessionStorage.msgs || '[]'),
},
methods: {
add_msg() {
let info = this.info;
if (info) {
this.msgs.unshift(this.info);
this.info = '';
sessionStorage.msgs = JSON.stringify(this.msgs);
}
},
del_li(index) {
console.log(index);
this.msgs.splice(index, 1);
sessionStorage.msgs = JSON.stringify(this.msgs);
}
}
});
</script>
插槽指令
上面的父组件和子组件之间的数据交互看起来贼麻烦，所以我们可以通过插槽（slot）指令来进行
所谓的插槽，也就是类似于一个子组件或者标签的引用的过程，在父组件里面定义一个slot，给她起个name叫“del_btn”，然后组件引入到子组件，子组件里面有个元素的属性slot值等于name的值"del_btn"，然后父组件里面没有值的时候就可以显示子组件里面的信息了（切记：插槽slot要写在父组件里面！！！）
<body>
<div id="app">
<p>
<input type="text" v-model="info">
<button @click="add_msg">留言</button>
<ul>
<msg-tag :msg="msg" v-for="(msg, i) in msgs" :key="msg">
<!--template通过v-slot绑定子组件内部slot插槽标签的name属性值-->
<template v-slot:del_btn>
<span @click="del_fn(i)" class="del">x</span>
</template>
</msg-tag>
</ul>
</p>
</div>
</body>
<script src="js/vue.js">
let msgTag = {
props: ['msg'],
template: `
<li>
<!--slot标签是在子组件中占位，父组件模板中可以通过name名字来填充-->
<slot name="del_btn"></slot>
<span>{{ msg }}</span>
</li>
`,
};
new Vue({
el: '#app',
components: {
msgTag
},
data: {
info: '',
msgs: JSON.parse(sessionStorage.msgs || '[]'),
},
methods: {
add_msg() {
let info = this.info;
if (info) {
this.msgs.unshift(this.info);
this.info = '';
sessionStorage.msgs = JSON.stringify(this.msgs);
}
},
del_fn(index) {
console.log(index);
this.msgs.splice(index, 1);
sessionStorage.msgs = JSON.stringify(this.msgs);
}
}
});
</script>
Vue--基础2的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
随机推荐
- PAT 乙级 1048.数字加密 C++/Java
题目来源 本题要求实现一种数字加密方法.首先固定一个加密用正整数 A,对任一正整数 B,将其每 1 位数字与 A 的对应位置上的数字进行以下运算:对奇数位,对应位的数字相加后对 13 取余——这里用 ...
- Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'com.qingmu.mybaitsplus.mapper.UserMapper' available:
java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test.conte ...
- python字典中显示中文
#coding=utf-8import jsondict={'title':"这是中文"}print json.dumps(dict,ensure_ascii=False,enco ...
- android 发布时去除Log
1) project.properties文件里,去掉下面一行的注释: # To enable ProGuard to shrink and obfuscate your code, uncommen ...
- 09-cmake语法-add_dependencies()
在编译器的命令行上,为当前路径以及下层路径的源文件加入一些define flag.这个命令可以用来引入任何flag,但是它的原意是用来引入预处理器的定义.那些以-D或/D开头的.看起来像预处理器定义的 ...
- AtCoder Grand Contest 038题解
好久没更了 写点东西吧= = A 01Matrix 简单构造 左上角和右下角染成1其他染成0即可 #include<bits/stdc++.h> #define ll long long ...
- 【java异常】redis.clients.jedis.exceptions.JedisConnectionException: Could not get a res
产生此错误的原因通常是: 一.Redis没有启动: 我自己遇到一次这样的问题.汗! 二.由于防火墙原因无法连接到Redis; 1.服务器防火墙入站规则. 2.访问Redis的应用程序所在主机的出站规则 ...
- contest3 CF994 div2 ooxxx? oooox? ooooo?
题意 div2 C (x)(o) 在一个平面上, 给一个水平的正方形和一个\(45^.斜\)的正方形 求是否相交(共点也算), 坐标正负\(100\)以内 div2 D (x)(o) \(A,B\)两 ...
- Java实现递归阶乘
public class Factorial{ public static void main(String[] args){ for (int i = -5; i <= 5; i++) { S ...
- [RN] React Native 实现图片预览
[RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...