Vue（二）
---恢复内容开始---
1、vue条件指令
可以运行加减运算
可以进行if判断
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
</head>
<body>
<div id="app">
<p v-if="r1" key="p_r1">if条件</p>
<p v-show="r2">show条件</p>
{{ num + 1 - 5 * 2}} <!--列表-->
<!--v-else会默认与v-if等有条件的分支进行绑定-->
<!--v-else-if必须有条件彩盒有条件v-if分支进行绑定-->
<ul>
<li v-if="1 == 2">111</li> //判断只会显示一个结果，从上往下进行匹配，条件成立打印出来
<li v-else-if="'2' == 1">222</li>
<li v-else>333</li>
</ul>
</div>
</body>
<script src="js\vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
r1:true, //对函数名r1进行渲染，true返回值，false不返回
r2:false,
}
// methods:{
//
// }
})
</script>
</html>
数据关联（点击指定字符展示对应的内容）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
</head>
<body>
<div id="app">
<p v-if="r1" key="p_r1">if条件</p>
<p v-show="r2">show条件</p>
{{ num + 1 - 5 * 2}} <!--列表-->
<!--v-else会默认与v-if等有条件的分支进行绑定-->
<!--v-else-if必须有条件彩盒有条件v-if分支进行绑定-->
<ul>
<li v-if="1 == 1">111</li>
<li v-else-if="'2' == 2">222</li>
<li v-else>333</li>
</ul> <ul>
<li @click="action('a')">a</li>
<li @click="action('b')">b</li>
<li @click="action('c')">c</li>
</ul>
<ul>
<li v-show="flag == 'a'">aaa</li>
<li v-show="flag == 'b'">bbbb</li>
<li v-show="flag == 'c'">ccccc</li>
</ul>
</div>
</body>
<script src="js\vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
r1:true,
r2:false,
flag:'a', //默认展示函数名为a的数据
},
methods:{
action:function (s) {
this.flag=s //设置战术函数名为变量，根据用户点击对应的字段的函数传参
}
}
})
</script>
</html>
v-for循环指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
</head>
<body>
<div id="app">
<!--//根据索引获取值-->
<p>{{ nums[2] }}</p>
<ul>
<!--只遍历-->
<!--for循环打印-->
<li v-for="num in nums">{{ num }}</li>
</ul>
<ul>
<!--值与索引-->
第一个参数是循环获取值，第二个是获取值对应的索引位置
<li v-for="(num,index) in nums">{{ num }} {{ index }}</li>
</ul> <ul>
<!--值、键、索引-->
<li v-for="(v,k,i) in people"> {{v}} {{ k }} {{ i }}</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
nums:[5,3,2,1,4],
people:{
'name':'Owen',
'age':'17.5',
'gender':'others'
}
}
})
</script>
</html>
输入框输入内容，添加评论，删除指定的评论
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
<style>
span{
margin-left: 100px;
cursor: pointer;
color: green;
}
span:hover{
color: red;
}
</style>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="val">
<button @click="add">评论</button>
</p>
<ul>
<li v-for="(info,i) in infos">
{{info}}
<span @click="del(i)">删除</span>
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
l =[1,2,3];
l.splice(1,1);
console.log(l)
</script>
<script>
new Vue({
el:'#app',
data:{
infos:[],
val:''
},
methods:{
del:function (i) {
// splice:从那个索引开始 操作的位数 操作的结果（可变长）
this.infos.splice(i,1)
},
add: function () {
let val = this.val;
if (val){
this.infos.splice(0,0,val);
this.val = ' '
}
}
}
})
</script>
</html>
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就在页面上进行双向数据绑定展示出结果或者用作其它处理
computed比较适合对多个变量或者对象进行处理后返回一个结果值，就是数个多个变量中的某一个值发生变化我们监控的这个值也就会发生变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
</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> </body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
first_name:'',
last_name:'',
// full_name:'None',
},
computed:{
// 1.在computed中定义的变量的值等于绑定的函数的返回值
// 2、绑定的函数中出现的所有vue变量都会被监听
full_name:function () {
// 后台打印
console.log('被调用了');
// 返回第一个值和第二个值拼接显示
return this.first_name + this.last_name;
}
}
})
</script>
</html>
watch属性可以用来监听data属性中数据的变化，同时watch还可以被用来监听路由route的变化，只是这里的监听的元素是固定的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
</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>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
full_name:'',
first_name:'',
last_name:''
},
watch:{
// 1、后方绑定的函数就是监听前方的变量，变量值的改变，函数被调用
full_name:function(){
// 切分变量full_name的属性
let res=this.full_name.split('');
// 获取变量res索引为0的值赋值给变量first_name
this.first_name = res[0];
// 获取变量res索引为1的值赋值给变量last_name
this.last_name = res[1];
}
}
}) </script>
</html>
methods、watch、computed的区别：
computed属性的结果会被缓存、除非依赖的响应式属性变化才会重新计算，主要当做属性来使用
methods方法表示一个具体的操作，主要书写业务逻辑
watch一个对象，键是需要观察的表达式，值是对应回调函数、主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看做是computed和methods的结合体；
分隔符（delimiters）
delimiters作用是改变我们插值的符号，Vue默认的插值是双大括号{{}}，但有时候会有需求更改这个插值的形式。
delimiters:['${','}']
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
</head>
<body>
<div id="app">
{{msg}}
{{{ msg }
${msg}
</div> </body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'12345'
},
delimiters:['${','}']
}) </script> </html>
组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
</head>
<body>
<div id="app">
<!--<h1>组件概念</h1>-->
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 组件:有html模板，有css样式，有js逻辑的集合体
// 根组件的模板就使用挂载点，子组件必须自己定义template(局部子组件、全局子组件)
new Vue({
el:'#app',
template:`
<div>
<h1 @click="action1" style="color: red">组件渲染的模板</h1>
<h2 @click="action">副标题</h2>
</div>
`,
data:{
},
methods:{
action:function () {
alert('123')
},
action1:function () {
alert('2222')
}
}
})
</script>
</html>
局部组件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
</head>
<body>
<div id="app">
<abc></abc>
<abc></abc> </div> </body>
<script src="js/vue.js"></script>
<script> // 定义局部组件
let localTag = { // 1，data要达到组件复用，必须为每一个组件提供一个名称空间(作用域)
// 2，data的值就是一个存放数据的字典
// 需要满足1和2，data值为一个可以产生名称空间的函数的返回值，返回值是字典
data: function () { return {
count: 0,
}
},
template: `
<div class="box" style="border:solid; width: 100px">
<h1>标题</h1>
<p class="p1">文本内容</p>
<p @click="action" class="p2" style="background-color: green">被点击了{{ count }}下</p>
<!--<button @click="send"></button>-->
</div>
`,
methods: {
action: function () {
this.count++
},
}
}; new Vue({
el: '#app',
data: {},
// 注册局部组件
components: {
'abc': localTag
}
}) </script>
</html>
全局组件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
</head>
<body>
<div id="app">
<!--在标签中建议使用-语法命名，对应js中就是驼峰命名-->
<old-boy></old-boy> </div> </body>
<script src="js/vue.js"></script>
<script>
// vue.component(组件名{组件主体})
Vue.component('oldBoy',{
data:function () {
return {
count:0
}
},
template:`
<div class="box" style="border: solid;width: 100px">
<h1>全局</h1>
<p class="p1">文本内容</p>
<p @click="action" class="p2" style="background:yellow ">被点击了{{ count }}次</p>
</div>
`,
methods:{
action:function () {
this.count++
},
}
});
// 全局组件不需要注册
new Vue({
el:'#app',
data:{
}
})
</script>
</html>
信息父传子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
</head>
<body>
<div id="app">
<!-- local-tag就可以理解为自定义标签，使用msg变量值由父组件提供 -->
<!-- local-tag标签代表的是子组件，owen为标签的自定义属性 -->
<!-- 在子组件内部能拿到owen，就可以拿到父组件的信息 -->
<local-tag :owen="msg"></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let localTag = {
// 子组件拿自定义属性
props: ['owen'],
template: `
<div>
<h1>信息</h1>
<p>{{ owen }}</p>
</div>
`
}; new Vue({
el: '#app',
data: {
msg: '父级的信息'
},
components: {
// 'localTag': localTag,
// localTag: localTag,
localTag // 在页面中 <local-tag>
}
})
</script>
</html>
信息子传父:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<global-tag @recv="get_title"></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('global-tag', {
template: `
<div>
<input type="text" v-model="msg">
<!--<button @click="action">修改标题</button>-->
</div>
`,
data: function () {
return {
msg: ''
}
},
methods: {
// action: function () {
// let msg = this.msg;
// // recv是自定义的事件
// this.$emit('recv', msg)
// }
},
watch: {
msg: function () {
this.$emit('recv', this.msg)
}
}
}); new Vue({
el: '#app',
data: {
title: '父组件定义的标题'
},
methods: {
get_title: function (msg) {
this.title = msg
}
}
})
</script>
</html>
---恢复内容结束---
Vue（二）的更多相关文章
- Vue(二) 计算属性
模板内的表达式常用于简单的运算,当过长或逻辑复杂时,难以维护,计算属性就是解决该问题的 什么是计算属性 表达式如果过长,或逻辑更为复杂,就会变得臃肿甚至难以维护,比如: <div> {{ ...
- vue 二维码长按保存和复制内容
效果图: 二维码用了 qrcode.vue npm install qrcode.vue --save 复制内容用了 vue-clipboard2 npm install vue-clipboard2 ...
- 一步一步学Vue(二)
接上篇,在本篇中,我们将要实现如下,功能,编辑和查询,我们当前的todolist程序,和线上其它的demo程序不同,我们会对其进行增删改查的基本操作,之后进行进一步的完善,按照常规的系统使用经验,一般 ...
- Vue (二) --- Vue对象提供的属性功能
--------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...
- vue二、脚手架搭建
1:安装nodeJs(下载一路回车) https://nodejs.org/zh-cn/ 2:检验nodeJs是否安装成功 (注意nodeJs是否添加到window路径中) 进入cmd -> n ...
- springboot+VUE(二)
入element-ui cnpm install element-ui -S 执行后,会下载element-ui的包到本地,同时会将配置加入到package.json的依赖块中. 通过命令行可以将最新 ...
- Vue(二)基础
01-vue的起步 1.引包 a) 直接下载,并用<script>标签引入 b) CDN方式引入: <script src="https://cdn.bootcss.com ...
- vue二次实战（二）
https://www.cnblogs.com/jellify/p/9522477.html install的弹出框中输入sublimeTmpl,找到sublimeTmpl这个插件后回车 Vue路由 ...
- vue二次实战（一）
创建好项目(npm run dev 运行项目:先不用运行,或先运行再关闭) 先安装axios! npm install axios 然后! npm install --save axios vue-a ...
- vue二次实战
vue爬坑之路 npm uninstall 模块名(删除指定模块) https://www.cnblogs.com/wisewrong/p/6255817.html vue快速入门 https://s ...
随机推荐
- 44.Python实现简易的图书管理系统
首先展示一下图书管理系统的首页: 这是图书管理系统的发布图书页面: 最后是图书管理系统的图书详情页已经图书进行删除的管理页. 该图书管理系统为练习阶段所做,能够实现图书详情的查询.图书的添加.图书的删 ...
- jQuery笔记（二）jQuery中DOM操作
前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...
- 页面置换算法——最近最久未使用算法(c语言实现)
操作系统实验:用C语言编程实现最近最久未使用置换算法(LRU) 最近最久未使用置换算法(LRU),全称Least Recently Used,是一种页面置换算法. 对于在内存中但又不用的数据块(内存块 ...
- Rtudio 安装包报错
今天重新安装了一下Rstudio,基本上很多包都安装不上,问了度娘发现被墙了 f..k.. 解决办法,更改安装包的镜像为清华镜像 tools->gloabl options->packag ...
- C#读取excel时提示“外部数据库驱动程序 (1) 中的意外错误”
- EOFError: Compressed file ended before the end-of-stream marker was reached解决办法（在Windows下查看已下载的MNIST数据文件）
出现这个问题的原因是因为文件下载到一半就中断了,解决办法是删除datasets中下载到一半的数据包. 下面以我遇到的问题为例: 我下载数据下载到最后一个包就没有反应了,于是我强制终止了运行,可能是因为 ...
- [51nod 1181] 质数中的质数 - 筛法
如果一个质数,在质数列表中的编号也是质数,那么就称之为质数中的质数.例如:3 5分别是排第2和第3的质数,所以他们是质数中的质数.现在给出一个数N,求>=N的最小的质数中的质数是多少(可以考虑用 ...
- 【android】Parcelable的相关技术总结
关于Parcelable的相关知识学习 进行Android开发的时候,无法将对象的引用传给Activities或者Fragments,我们需要将这些对象放到一个Intent或者Bundle里面,然 ...
- AcWing 1052. 设计密码
//f[i][j]表示前 i 个字符与字符串匹配长度为 j 时的方案数 #include <cstring> #include <iostream> #include < ...
- 菜不成声 的 ac自动机 刷题记录
HDU2222 Keywords Search 模板题.数组开小了结果会T... 代码 #include <bits/stdc++.h> #define nmax 10010 using ...