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 ...
随机推荐
- 连接数据库的工具JdbcUtil
public class JdbcUtil { private static String driver=null;//驱动 private static String url=null;//连接地址 ...
- Spring Event事件驱动
Spring事件驱动模型,简单来说类似于Message-Queue消息队列中的Pub/Sub发布/订阅模式,也类似于Java设计模式中的观察者模式. 自定义事件 Spring的事件接口位于org.sp ...
- 手写MyBatis流程
MyBatis 手写MyBatis流程 架构流程图 封装数据 封装到Configuration中 1.封装全局配置文件,包含数据库连接信息和mappers信息 2.封装*mapper.xml映射文件 ...
- CF1280E Kirchhoff's Current Loss
题意 做法 考虑一个子电路图\(G\),设得到有效电阻为\(x\),费用为\(f_G(x)\),通过归纳易得\(f_G(x)\)是关于\(x\)的一个一次函数,即\(f_G(x)=k_Gx\) 考虑电 ...
- 回文串--Manacher算法（模板）
用途:在O(n)时间内,求出以每一个点为中心的回文串长度. 首先,有一个非常巧妙的转化.由于回文串长度有可能为奇数也有可能为偶数,说明回文中心不一定在一个字符上.所以要将字符串做如下处理:在每两个字母 ...
- C#扩展枚举的别名
C#扩展枚举的别名 用途: 提高代码的可读性. 打印到日志系统,方便于调试. 代码: 首先编写一个Attribute [AttributeUsage(AttributeTargets.Enum | A ...
- JavaScript-事件类型
DOM3事件类型: 1.UI事件:当用户与页面上的元素交互时触发 a.DOMActivate:元素已经被用户操作激活. b.load:(1)页面完全加载:window触发. (2)所有框架加载完毕:框 ...
- java读取解析application.yml
java读取解析application.yml 不用依赖spring容器,可单独使用. bug已修改... 第一步.首先要2个jar <!-- properties和yaml格式化 --> ...
- linux-crond_计划任务
定时计划任务 主要文件介绍: [root@nginx ~]# ll /etc/cron* -d drwxr-xr-x. 2 root root 21 7月 11 20:28 /etc/cron.d d ...
- linux中Jenkins启动/重启/停止命令
简要记录一下Linux 中Jenkins启动/重启/停止命令 启动service jenkins start1重启service jenkins restart1停止service jenkins s ...