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 ...
随机推荐
- Vue自定义全局Toast和Loading
如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast.那么我们就自定义这两个组件吧. 1.Toast组件 首先,在common下新建global文件 ...
- super().__init__()方法
class first(object): def __init__(self,age,name): self.age = age self.name = name class second(first ...
- LeetCode 237. 删除链表中的节点 （单链表遍历）
题目链接:https://leetcode-cn.com/problems/delete-node-in-a-linked-list/ 请编写一个函数,使其可以删除某个链表中给定的(非末尾)节点,你将 ...
- Charles抓包问题
Charles抓包问题 抓包失败解决方法之一:在proxy下的Recording Setting找到解决方法 找到里面的include 把勾去掉,点击OK,然后就恢复正常可以抓包了.
- 获取redis cluster master对应的slot分布情况
需求:原生的redis-trib.rb功能是强大,但输出的内容过于繁杂,比如我需要关注哪些master对应哪些slots,不是很直观,如果集群的规模更大的话,那么输出的结果获取信息更加困难. 说明:这 ...
- 安装SQL Server2008出现Restart computer failed的解决办法
1.打开注册表编辑器 2.找到HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager双击文件夹 3.找到PendingF ...
- 数据预处理 | python 第三方库 imblearn 处理样本分布不均衡问题
说明:目前 只记录了 过采样 和 欠采样 的代码部分 1 样本分布不均衡描述: 主要出现在与分类相关的建模问题上,不均衡指的是不同类别的样本量差异非常大. 样本量差距过大会影响到建模结果 2 出现的场 ...
- mysql批量插入数据uuid去重
update base_problem set uuid=replace(uuid(),'-',''); update base_problem set uuid = UUID() where uui ...
- MCPS & MIPS
MIPS:Million Instructions Per Second MCPS:Million Cycles Per Second MIPS = Total Instructions*Sampli ...
- SQLserver中存储图片
两种方式1.存放图片路径2.转换成2进制流(不过这样的话将很占用数据库空间)存路径的方式就很简单了,下面着重给出转换成2进制流的存入以及读取方法.存入:string FilePath="&q ...