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 ...
随机推荐
- 白面系列 docker
在讲docker之前,首先区分2个概念,容器和虚拟机. 容器: 虚拟机: 简单来说,容器虚拟化操作系统:虚拟机虚拟化硬件. 容器粒度更小更灵活:虚拟机包含资源更多更大. docker就是用来做容器化的 ...
- 2-1.了解Pod对象
1.Pod参数定义 # 必填,版本号 apiVersion: string kind: Pod # 必填,元数据 metadata: # 必填,Pod对象的名称(命名规范需要符合RFC 1035规范) ...
- Math, Date，JSON对象
Math 对象 Math是 JavaScript 的原生对象,提供各种数学功能.该对象不是构造函数,不能生成实例,所有的属性和方法都必须在Math对象上调用. 静态属性 Math对象的静态属性,提供以 ...
- 剑指offer-面试题21-调整数组顺序使奇数位于偶数前面-双指针
/* 题目: 调整数组顺序使奇数位于偶数前面. */ /* 思路: 双指针: 一个指针last用于遍历,当为奇数时+1, 当为偶数时,交换last和pre指向的值,向前移动pre指针. */ #inc ...
- 2019牛客多校第二场H题（悬线法）
把以前的题补补,用悬线求面积第二大的子矩形.我们先求出最大子矩阵的面积,并记录其行三个方向上的悬线长度.然后排除这个矩形,记得还得特判少一行或者少一列的情况 #include <bits/std ...
- SurfaceView 与view区别详解
SurfaceView 与view区别详解 https://blog.csdn.net/u011339364/article/details/83347109 2018年10月24日 17:20:08 ...
- ubuntu18.04 安装与卸载 php7.2
安装: 如果之前有其他版本PHP,在这边禁用掉 1 sudo a2dismod php5 再来安装做准备 1234 sudo apt-get install software-properties-c ...
- Java String类型转换成Date日期类型
插入数据库时,存入当前日期,需要格式转换 import java.text.SimpleDateFormat; formatter = new SimpleDateFormat( "yyyy ...
- 《javascript正则表达式迷你书》笔记
字符匹配攻略 横向匹配--通过量词 {m,n} {m,} {m} ? + * 贪婪匹配 后面跟?号 惰性匹配 纵向匹配--通过字符组 \d \D \w \W \s \S . \w表示[0-9a-zA- ...
- laravle中orm简单的增删改查
友情提示请在有laravel基础的情况下观看文章 1.数据库信息(user表) CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, ...