Vue框架基础02
摘要
- 条件指令
- 循环指令
- 评论案例
- 实例成员之computed
- 实例成员之watch
- 分隔符
- 组件：局部组件和全局组件
- 局部组件与全局组件之间信息传输
一、条件指令扩展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>li {list-style: none;}</style>
</head>
<body>
<div id="app">
<ul>
<li @click="action('a')"><button>a</button></li>
<li @click="action('b')"><button>b</button></li>
<li @click="action('c')"><button>c</button></li>
</ul>
<ul>
<li v-if="flag=='a'">aaaaaa</li>
<li v-if="flag=='b'">bbbbbb</li>
<li v-if="flag=='c'">cccccc</li>
</ul>
</div> <script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
flag: 'a'
},
methods:{
action:function (s) {
this.flag = s
}
}
})
</script>
</body>
</html>
二、循环指令v-for=“num in nums”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>li {list-style: none}</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="addr in addrs">{{ addr }}</li>
</ul>
<ul>
<li v-for="(addr, index) in addrs">{{ index }}.{{ addr }}</li>
</ul>
<ul>
<li v-for="info in user">{{ info }}</li>
</ul>
<ul>
<li v-for="(v, k, index) in user">{{ index }}.{{ k }}={{ v }}</li>
</ul>
</div>
<script src="vue.js"></script>
<script>new Vue({
el: '#app',
data: {
addrs: ['北京','上海','深圳','武汉'],
user: {'name':'Sgt', 'age': 18, 'gender': 'male'}
} }) </script>
</body>
</html>
显示结果：
三、评论示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="vue.js"></script>
<style>
li {list-style: none;}
span {
cursor: pointer;
color: red;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="val">
<button @click="commenting">评论</button>
<hr>
<ul>
<li v-for="(comment, index) in comments">
#{{index}}楼 {{comment}}
<span @click="comment_del(index)">x</span>
</li>
</ul>
</div>
<script>new Vue({
el: '#app',
data: {
val: '',
comments: []
},
// splice: 从哪个索引开始 操作的位数 操作成的结果(可变长)
methods: {
commenting:function () {
let newComment = this.val;
this.comments.splice(0,0,newComment);
this.val = ''
},
comment_del: function (index) {
this.comments.splice(index,1)
}
}
})
</script>
</body>
</html>
四、实例成员computed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>
姓：<input type="text" v-model="first_name">
名：<input type="text" v-model="last_name">
</p>
<p>
姓名：<b>{{full_name}}</b>
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
first_name:'',
last_name:'',
},
computed: {
// 1.在computed中定义的变量的值等于绑定的函数的返回值
// 2.绑定的函数中出现的所有vue变量都会被监听
full_name:function () {
return this.first_name + this.last_name
}
}
})
</script>
</body>
</html>
五、实例成员watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="full_name">
</p>
<p>
姓：<b>{{first_name}}</b>
名：<b>{{last_name}}</b>
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: ''
},
watch: {
// watch会监听data的变量，当watch里指定的变量发生改变，函数被调用
full_name:function () {
this.first_name = this.full_name.slice(0,1);
this.last_name = this.full_name.slice(1)
}
}
})
</script>
</body>
</html>
六、分隔符：自定义Vue插值表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{{ msg }}</p>
<p>${ msg }$</p>
</div>
<script>
new Vue({
el:'#app',
data:{msg: 'Hello Vue!'},
delimiters: ['${','}$']
})
</script>
</body>
</html>
七、局部组件与全局组件
①组件的概念：
组件：是有html模板，有css样式，有js逻辑的集合体
根组件的模板就是使用挂载点，子组件必须自己定义template
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>组件概念</h1>
</div>
<script>
new Vue({
el: '#app',
template:`
<div>
<h1 style="color: red;">组件渲染的模板</h1>
<h2 @click="action">副标题</h2>
</div>`,
data: { },
methods: {
action:function () {
alert('123')
}
}
})
</script>
</body>
</html>
②局部组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>局部组件</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<abc></abc>
<abc></abc>
</div>
<script>
// 开始定义局部组件
let localTag= {
//data要实现组件的复用，需要为每个组件提供一个名称空间(作用域)
//data值就是一个存放数据的字典
//所以data值在局部组件中被定义为一个可以产生名称空间的函数的返回值(字典)
data:function () {
return {
count: 0,
}
},
template:`
<div style="border: solid;width: 100px">
<h1>标题</h1>
<p class="c1">文本内容</p>
<p class="c2" @click="action"><button>被点击{{count}}次</button></p>
</div>
`,
methods:{
action:function () {
this.count++
}
}
}; new Vue({
el:'#app',
data:{ },
// 局部组件必须要注册
components: {
'abc': localTag
}
})
</script>
</body>
</html>
分析：
③全局组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="vue.js"></script>
</head>
<body>
<div id="app"> </div>
<script>
// 开始定义全局组件
// Vue.component(组件名, {组件主体});
Vue.component('keepOn',{
data:function () {
return {
count: 0,
}
},
template:`
<div style="border: solid;width: 100px">
<h1>标题</h1>
<p class="c1">文本内容</p>
<p class="c2" @click="action"><button>被点击{{count}}次</button></p>
</div>
`,
methods:{
action:function () {
this.count++
}
}
});
// 全局组件无需再跟组件中注册
new Vue({
el:'#app',
data:{ },
})
</script>
</body>
</html>
全局组件与局部组件大部分地方都是一样定义的，区别在于：
全局组件定义时候使用：(且无需再跟组件处注册)
Vue.component(组件名, {组件主体});
而局部组件则使用：
let localTag={组件主体}
而且需要在根组件内注册：component:{'abc':localTag},这里的abc为自己定义的组件名，localTag也是自己声明的一个变量名，都可以自己随便起。
八、局部组件和全局组件数据的传递
父传子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父传子</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<local-tag :xxx="msg"></local-tag> </div>
<script>
let localTag = {
// 子组件拿自定义属性
props:['xxx'],
template:`
<div>
<h1>信息</h1>
<p>{{ xxx }}</p>
</div>
`
};
new Vue({
el:'#app',
data:{
msg: '我是根组件的数据'
},
components: {
// 'localTag':localTag,
// localTag:localTag,
localTag
}
})
</script>
</body>
</html>
子传父
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子传父</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{title}}</h1>
<global-tag @recv="get_title"></global-tag> </div>
<script>
Vue.component('global-tag',{
template:`
<div>
<input type="text" v-model="msg">
</div>
`,
data: function () {
return {
msg:''
}
},
methods:{},
watch: {
msg: function () {
this.$emit('recv', this.msg)
}
}
});
new Vue({
el:'#app',
data:{
title: '根组件的标题'
},
methods: {
get_title:function (msg) {
this.title=msg
}
} }) </script>
</body>
</html>
Vue框架基础02的更多相关文章
- Vue.js高效前端开发 • 【Ant Design of Vue框架基础】
全部章节 >>>> 文章目录 一.Ant Design of Vue框架 1.Ant Design介绍 2.Ant Design of Vue安装 3.Ant Design o ...
- Vue框架基础概要
Vue.js是什么? Vue.js(读音 /vjuː/,类似于 view 的读音)是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本 ...
- Spring 框架基础(02)：Bean的生命周期，作用域，装配总结
本文源码:GitHub·点这里 || GitEE·点这里 一.装配方式 Bean的概念:Spring框架管理的应用程序中,由Spring容器负责创建,装配,设置属性,进而管理整个生命周期的对象,称为B ...
- Vue3 框架基础随笔 (一)
VUE框架基础部分随笔 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. Vue可以使用简单的代码实现一个单页面应用. 基本格式 Vue通过模板语法来声明式的将数 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- 基于VUE框架 与 其他框架间的基本对比
基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03 11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- 10.vue框架
vue框架 易用.灵活.高效 https://cn.vuejs.org/ mvc M model 数据 模型 V view 视图 dom操作 C controller 控制器 路由 C oBtn.on ...
- Vue 框架-08-基础实战 demo
Vue 框架-08-基础实战 demo 前面介绍了有 7 篇了,都是小实例,没有相对完整的应用,虽然有些功能挺实用,但还是有的不常用的,今天记录一篇关于前几篇基础内容的实战 demo,也是对 Vue ...
随机推荐
- Jmeter+ant+jekins环境配置
Jmeter+ant+jekins 一.ant安装 1. ant安装 官网下载http://ant.apache.org 解压到想要的盘里面 2. 配置环境变量 (1)变量名:ANT_HOME 变量值 ...
- libreoj #10153 树形dp
$des$ 有一棵二叉苹果树,如果数字有分叉,一定是分两叉,即没有只有一个儿子的节点.这棵树共 NNN 个节点,标号 1 至 N,树根编号一定为 1. 我们用一根树枝两端连接的节点编号描述一根树枝的位 ...
- NetHack 备忘
NetHack 备忘 常用操作 操作均区分大小写 上下左右移动 y k u h l b j n / 查看地图上的东西 < 上楼 > 下楼 c 关门 部分怪不会开门 a 使用(工具) d 丢 ...
- 文档流&浮动&定位
文档流指元素在文档中的位置由元素在html里的位置决定,块级元素独占一行,自上而下排列:内联元素从左到右排列脱离文档流的方式: 浮动,通过设置float属性 绝对定位,通过设置position:abs ...
- CTF SSRF(服务器端伪造请求)
目录 CTF SSRF(服务器端伪造请求) 一.概念 二.危害 三.漏洞挖掘与判断 四.相关函数 五.IP绕过 六.Gopher协议 1.使用限制 2.构造payload CTF SSRF(服务器端伪 ...
- 东站七雄保C位！论三线楼市网红板块的自我修养
不对!东站板块才是伍家岗的C位.这里有东站七雄! 前些天发了一篇城东C位之路的文章,居然引发了诸葛说房聊天群内大佬的激烈纷争.公说公有理婆说婆有理,一时争的是不可开交,大有约架之势.所以我决定提前写& ...
- arcgis python脚本工具实例教程—栅格范围提取至多边形要素类
arcgis python脚本工具实例教程-栅格范围提取至多边形要素类 商务合作,科技咨询,版权转让:向日葵,135-4855_4328,xiexiaokui#qq.com 功能:提取栅格数据的范围, ...
- uploadifive 1.1.2 动态传参
之前用过Flash版本的uploadify,写过一篇关于uploadify动态传参的文章(点击打开链接).后来有了HTML5版本的上传控件,叫uploadifive,测试着用了一下,效果还不错.这里主 ...
- vue---定义全局变量或函数
开发项目的时候,有很多的东西需要重复使用,例如函数或者变量等,例如网站服务器地址,token等,这时候就需要设置一波全局变量和全局函数 定义全局函数 原理 新建一个模块文件,然后在main.js里面通 ...
- 30段极简Python代码
Python 是机器学习最广泛采用的编程语言,它最重要的优势在于编程的易用性.如果读者对基本的 Python 语法已经有一些了解,那么这篇文章可能会给你一些启发.作者简单概览了 30 段代码,它们都是 ...