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> 元素上创建双向数据绑定. ...
随机推荐
- Codeforces 869E. The Untended Antiquity (二维Fenwick，Hash）
Codeforces 869E. The Untended Antiquity 题意: 在一张mxn的格子纸上,进行q次操作: 1,指定一个矩形将它用栅栏围起来. 2,撤掉一个已有的栅栏. 3,询问指 ...
- HDU 4612 Warm up —— （缩点 + 求树的直径）
题意:一个无向图,问建立一条新边以后桥的最小数量. 分析:缩点以后,找出新图的树的直径,将这两点连接即可. 但是题目有个note:两点之间可能有重边!而用普通的vector保存边的话,用v!=fa的话 ...
- mysql：启动服务时遇到的问题
1.cmd命令: 在切换路径时,如果要切到另外一个磁盘,比如从C盘切到E盘,命令如下: cd /d 你要切换的路径 2.错误:“服务名无效” 问题原因:mysql服务没有安装.(参考:https:// ...
- Failed to execute aapt
Failed to execute aapt 没错,看到这个表示你的资源出错了.不用想别的. 比如: Failed to execute aapt com.android.ide.common.pro ...
- 性能分析 | Linux 内存占用分析
这篇博客主要介绍 linux 环境下,查看内存占用的两种方式:使用 ps,top等命令:查看/proc/[pid]/下的文件.文章简要介绍了命令的使用方法与一些参数意义,同时对/proc/[pid]/ ...
- 一次galera cluster集群故障节点无法启动问题排查
现象 环境: Server version: 10.0.25-MariaDB-wsrep MariaDB Server, wsrep_25.13.raf7f02e 配置文件: [root@node-2 ...
- 用JSON文本动态创建DataGrid
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- Microsoft 防跨站点脚本库AntiXSS Library
AntiXSS 库目前处于版本 4.2.1,下载地址:http://www.microsoft.com/download/en/details.aspx?id=28589.它经历了一次非常棒的重新编写 ...
- 问题root@localhost's password:localhost:permission denied,please try again
转载:https://www.cnblogs.com/hmy-blog/p/6500909.html 经过试验,上述方法在我的电脑中没有成功. 1.安装 open ssh:sudo apt-get i ...
- ElasticSearch——分词
前言: 最近在使用elasticSearch中发现有些数据查不出来,于是研究了一下,发现是分词导致的,现梳理并总结一下. ElasticSearch 5.0以后,string类型有重大变更,移除了st ...