vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息
| 评论案例 |
splice: (start 几位，替换（新增）内容）
splice（0,0，内容）在头部插入内容
splice(0,1) 把索引为0的往后删除1位
splice(0,1,内容）把索引为0的往后替换1位 替换的内容 就是 内容 内容可以是多个值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
span{
margin-left: 100px;
cursor: pointer;
/*鼠标手势变成手指*/
color: gold;
}
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,index) in infos">
{{ info }}
<span @click="del(index)">x</span>
</li>
</ul> </div>
<script>
new Vue({
el:'#app',
data:{
val:'', //输入框内容
infos:[1,3,3,4,1] // for循环所有的所有的内容
},
methods:{
del:function(index){
//splice:从哪个索引开始 操作位数（0，添加，1替换一位，234566就是替换2345位） 替换的内容（或者添加的内容）
this.infos.splice(index,1) //删除留言 两位参数
},
add:function () {
let val = this.val;
if(val){
this.infos.splice(0,0,val); //留言
this.val = '' //输入框置为空
}
}
} })
</script>
| 实例成员值 computed |
1 在computed中定义的变量的值 = 绑定的变量 的函数返回值
2 在绑定的函数中出现的所有的 Vue变量都会被监听 就是在这个绑定变量的函数内出现的所有的 Vue变量（例如a,b）都会被监听，只要Vue变量（a,b）变化其中一个这个绑定变量的函数就执行一次
3 在这里绑定函数的变量不能再出现data中
<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: '',
// full_name: ''
},
computed: {
//1在computed中定义的变量的值等于绑定的变量 的函数返回值
// 2在绑定的函数中出现的所有的vue变量都会被监听 就是在这个绑定变量的函数内部出现的所有的
// vue变量（例如a,b）都会被监听 只要vue变量(a,b)变化其中一个这个绑定变量的函数就执行一次
//在这里绑定函数的变量不能再data中出现
full_name: function () {
return this.first_name + this.last_name;
}
}
})
</script>
| 实例化成员值 watch |
watch 绑定函数的变量发生变化 函数被调用 函数里面定义的变量就会发生变化
绑定函数的变量要在data中定义
<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:{
//1 后方绑定的函数就是监听前方的变量，变量值改变，函数被调用
//这里的绑定方法的变量需要再data里面定义
full_name: function () {
let res = this.full_name.split(''); this.first_name = res[0];
this.last_name = res.slice(1);
}
}
})
</script>
| Vue分隔符 区分和其他前端框架的变量 |
delimiters:
<div id="app">
{{ msg }}
{{{ msg}
${ msg}
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'123'
},
delimiters: ['${','}'] //区分开始Vue变量还是 JQuery变量
})
</script>
| 组件的概念 |
组件：有html模板，有css样式，有js逻辑的集合体
根组件的模板就使用挂载点，子组件必须自己template（局部子组件，全局子组件）
<div id="app">
<h1>组件概念</h1>
</div>
<script>
//组件：有html模板，有css样式，有js逻辑的集合体
//根组件的模板就使用挂载点，子组件必须自己定义template(局部子组件，全局子组件）
new Vue({
el:'#app',
template:`
<div>
<h1 style="color:red">组件渲染的模板</h1>
<h2 @click="action">副标题</h2>
</div>
`,
data:{
},
methods:{
action:function () {
alert(123)
}
}
})
</script>
| 局部子组件 |
data要达到组件的复用，必须为每一个组件提供一个名称空间（作用域相互独立 每引用一次就像python每次实例化对象一样）
data的值就是一个存放数据的字典
需要满足上述条件 data值为一个可以产生名称空间的函数的返回值，返回值是一个字典
局部子组件必须在根组件的components中注册！！！
<div id="app">
<!--div.box>h1{标题}+（p.p${文本内容}*2）-->
<!-- + 毗邻-->
<!--<div class="box">-->
<!--<h1>标题</h1>-->
<!--<p class="p1">文本内容</p>-->
<!--<p class="p2">文本内容</p>-->
<!--</div>--> <abc></abc>
<abc></abc>
</div>
<script>
//定义局部组件
let localTag = {
//1 data要达到组件的复用，必须为每个组件提供一个名称空间（作用域）
// data的值就是一个存放数据的字典
// 需要满足1和2 data值为一个可以产生名称空间的函数的返回值，返回值是字典
data:function(){
return {
count:0,
//r:'' vue前后端通信定义的变量
}
},
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>
<!--<button @click="send"></button> 提交数据-->
</div>
`,
methods:{
action:function () {
this.count++
}
//结合JQuery完成组件与后台的交互
// send:function () {
// $.ajax({
// url:'',
// type:'post',
// data:'',
// success:function (data) {
// this.r = data
// }
// })
// },
// watch:{
// r:function (){
//
// }
// }
},
}; new Vue({
el:'#app',
//局部组件必须注册
components:{
'abc':localTag
}
})
</script>
| 全局子组件 |
全局子组件 需要再Vue.component中注册（组件名，{组件主体内容}）
标签中建议使用 连接符 ' - ' 语法命名，对应js中就使用驼峰体命名
<old-boy></old-boy>
<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: darkslategrey">被点击了 {{ count }}下</p>
</div>
`,
methods:{
action:function () {
this.count ++
},
} });
//全局组件无需注册
new Vue({
el:'#app',
data:{ }
})
</script>
| 信息父传子 |
local-tag就可以理解为自定义标签，既然是标签使用msg变量值由父组件提供
local-tag标签代表的是子组件，owen为标签自定义属性
在子组件内部能拿到owen属性，就可以拿到父组件的信息
<div id="app">
<!--local-tag就可以理解为自定义标签，既然是标签使用msg变量值由父组件提供-->
<!--local-tag标签代表的是子组件，owen为标签自定义属性-->
<!--在子组件内部能拿到owen属性，就可以拿到父组件的信息-->
<local-tag :owen="msg"></local-tag>
</div>
<script>
//自定义标签 子组件
let localTag = {
//子组件拿自定义属性
props:['owen'],
template:`
<div>
<h1>信息</h1>
<p>{{ owen }}</p>
</div>
`
}; new Vue({
el:'#app',
data:{
msg:'父集的信息'
},
components:{
//'local-tag':localTag, 第一种写法
//localTag:localTag, 第一种简写
localTag //第二种简写 在页面中<local-tag>
}
})
</script>
| 信息子传父 |
<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:''
}
},
watch:{
msg: function () { //只要msg发生变化，就将值同步给父组件
this.$emit('recv',this.msg)
}
} }); new Vue({
el:'#app',
data:{
title:'父组件定义的标题'
},
methods:{
get_title:function (msg) {
this.title = msg
}
}
})
</script>
按钮更新信息子传父
<div id="app">
<h1>{{ title }}</h1>
<global-tag @recv="get_title"></global-tag> <!--全局组件-->
</div>
html
<script>
Vue.component('globalTag',{
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) //提交用$emit
}
}
}); new Vue({
el:'#app',
data:{
title:'父组件定义的标题'
},
methods: {
get_title:function (msg) {
this.title = msg
}
}
})
</script>
js
vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息的更多相关文章
- vue.js 组件-全局组件和局部组件
这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <! ...
- 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽
今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...
- Vue 中使用 extent 开发loading等全局 组件
Vue 中使用 extend 开发组件 简介:再开发过程中那面会遇到自定义 loading alert 等全局组件,这里我们可以使用 vue 中的extend 来帮助我们完成 一个简单extend例子 ...
- Vue 根组件,局部,全局组件 | 组件间通信,案例组件化
一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...
- 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- Vue其他指令-组件-全局-局部-组件的交互父传子
v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...
- vue（3）—— vue的全局组件、局部组件
组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...
- Vue（2）- v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
随机推荐
- Java基础线程系列大纲
## Java 多线程之 线程创建 ## Java 多线程之 Sleep ## Java 多线程之 Join ## Java 多线程之 生命周期 ## Java 多线程之 wait, notify a ...
- Zookeeper系列（十四）Zookeeper的数据与存储
作者:leesf 掌控之中,才会成功:掌控之外,注定失败. 出处:http://www.cnblogs.com/leesf456/p/6179118.html尊重原创,奇文共欣赏: 一.前言 前 ...
- python获取hive表时间格式最大分区
#获取表的最大分区 import boto3 from datetime import datetime,timedelta def get_max_partition(db_name,table_n ...
- 在CSS中水平居中和垂直居中：完整的指南
这篇文章将会按照如下思路展开: 一.水平居中 1. 行内元素水平居中 2. block元素水平居中 3. 多个块级元素水平居中 二.垂直居中 1. 行内元素水平居中 2. block元素水平居中 3. ...
- cmd ora-12560协议适配器错误
这个问题我解决了很久,其实问题的关键在于我在本机安装了一个Oracle11g数据库以及安装了一个Oracle Client,导致在使用sqlplus / as sysdba链接时出现报协议适配器的错误 ...
- 【软件工程】Alpha冲刺 （6/6）
链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 tomcat的学习与实现 服务器后端部署,API接口的beta版实现 后端代码 ...
- C# 7 .NET / CLR / Visual Studio version requirements
C# 7 .NET / CLR / Visual Studio version requirements You do NOT need to target .NET 4.6 and above, ...
- PHP AJAX 返回XML数据
例子:利用AJAX间接访问数据库,查出Nation表中的数据,返回XML数据,并将Nation表中的数据显示在下拉列表框中 外层建一个下拉列表框 </select> JQurey代码 $( ...
- cucumber+testng
执行顺序 beforeSuite in RunnerForInt beforeSuite in RunnerForString beforeTest in RunnerForInt beforeTes ...
- Android : 供应商原生开发套件 (VNDK)
一.VNDK概述 VNDK(Vendor Native Development Kit)是一组专门用于vendor实现其HAL的lib库,因为自Android 8.0以来,Google引入了Trebl ...