Vue的基本使用(二)
1.数据的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
</head>
<body>
<div id="app">
<label for="username">用户名:</label>
<input type="text" v-model="msg" id="username">
<p>{{ msg }}</p>
<textarea name="" id="" cols="30" rows="10" placeholder="add multiple lines" v-model = "msg"></textarea>
<input type="checkbox" id="checkbox" v-model = "checked">
<label for="checkbox">{{ checked }}</label>
<br>
<input type="checkbox" id="jack" value="Jack" v-model = "checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="join" value="Join" v-model = "checkedNames">
<label for="join">Join</label>
<input type="checkbox" id="mike" value="Mike" v-model = "checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names:{{ checkedNames }}</span>
<br>
<select name="" id="" v-model = "selected">
<option value="" disabled>请选择</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
<span>Selected:{{ selected }}</span>
<!--懒监听-->
<input type="text" v-model.lazy = "msg">
<!--数字显示-->
<input type="text" v-model.number = "age" type = "number">
<!--清除前后空格-->
<input type="text v-model.trim = "msg>
</div>
<script src="../vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
msg:"alex",
checked:false,
checkedNames:[],
selected:'',
age:0
}
}
})
</script>
</body>
</html>
2.双向数据绑定实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2</title>
</head>
<body>
<div id="app">
<input type="text" :value="msg" @input = "changeHandler">
<p>{{ msg }}</p>
</div>
<script src="../vue/dist/vue.js"></script>
<script> new Vue({
el:"#app",
data(){
return {
msg:"alex"
}
},
methods:{
changeHandler(e){
this.msg = e.target.value
}
}
})
</script>
</body>
</html>
3.局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3</title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
<script src="../vue/dist/vue.js"></script>
<script>
//如果仅仅是实例化vue对象中既有el又有template,如果template中定义模板的内容,
// 那么template模板的优先级大于el //1.声子, vue组件的名字首字母要大写,跟标签区分,组件中的data必须是一个函数,一定要有返回值
let App = {
data(){
return {
text:"ritian"
}
},
template:`
<div id="a">
<h2>{{ text }}</h2>
</div>
`,
methods:{}
} new Vue({
el:"#app",
data(){
return {
msg:"alex"
}
},
//用子
template:`
<div class="app">
<App></App>
</div>
`,
//挂子
components:{
//如果key和value一样,可以只写一个
//App:App
App
} })
</script>
</body>
</html>
4.局部组件的使用更改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4</title>
</head>
<body>
<div id="app">
<App></App>
</div>
<script src="../vue/dist/vue.js"></script>
<script>
//slot是vue中提供的内容组件,它会去分发内容 //可复用的vue组件
Vue.component("VBtn",{
data(){
return {}
},
template:`
<button><slot></slot></button>
`
}); let Vheader = {
data(){
return {}
},
template:`
<div>
<h2>ritian</h2>
<h2>ritian</h2>
<VBtn>登录</VBtn>
<VBtn>注册</VBtn>
<VBtn>按钮</VBtn>
<VBtn>提交</VBtn>
</div>
`
}; let App = {
data(){
return {
text:"我是ritian"
}
},
template:`
<div id="a">
<h2>{{ text }}</h2>
<Vheader></Vheader>
<VBtn>删除</VBtn>
<br>
</div>
`,
methods:{},
components:{
Vheader
}
}; new Vue({
el:"#app",
data(){
return {
msg:"alex"
}
},
template:`<App/>`,
components:{
App
}
})
</script>
</body>
</html>
5.父往子传值（通过标签传值或平行组件）
1.在子组件中,使用props声明接收父组件传过来的数据,可以直接在子组件中任意使用
2.加：动态传，不加：静态传
3.父组件 要定义自定义的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5</title>
</head>
<body>
<div id="app">
<App></App>
</div>
<script src="../vue/dist/vue.js"></script>
<script>
Vue.component("VBtn", {
data() {
return {}
},
template: `
<button>{{ id }}</button>
`,
props: ["id"]
}); let Vheader = {
data() {
return {}
},
props:["msg","post"],
template:`
<div class="child">
<h2>ritian</h2>
<h2>{{ msg }}</h2>
<h3>{{ post.title }}</h3>
<VBtn v-bind:id = "post.id"></VBtn>
</div>
`
}; let App = {
data(){
return {
text:"我是父组件的数据",
post:{
id:1,
title:"My Journey with Vue"
}
}
},
template:`
<div id="a">
<Vheader :msg = "text" v-bind:post = "post"></Vheader>
</div>
`,
methods:{},
components:{
Vheader
}
}; new Vue({
el:"#app",
data(){
return {
msg:"alex"
}
},
template:`<App />`,
components:{
App
}
}) </script>
</body>
</html>
6.子往父传值
1.子组件中通过$emit("自定义事件名"，传的值)触发父组件中自定义的事件,比如this.$emit("handler",1)
2.父组件中声明自定义的事件介绍（在子标签名中@事件名）,例如：<Son @handler='父自定义事件名'/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6</title>
</head>
<body>
<div id="app">
<App></App>
</div>
<script src="../vue/dist/vue.js"></script>
<script>
Vue.component("VBtn",{
data(){
return {}
},
template:`<button @click = "clickHandler">{{ id }}</button>`,
props:['id'],
methods:{
clickHandler(){
//每个组件中的this指的是当前组件对象
console.log(this);
this.id++;
//this.$emit("父组件声明自定义的事件","传值");
this.$emit("clickHandler",this.id);
}
}
}); let Vheader = {
data(){
return {}
},
props:["msg","post"],
template:`
<div class="child">
<h1>我是header组件</h1>
<h2>ritian</h2>
<h2>{{ msg }}</h2>
<h3>{{ post.title }}</h3>
<VBtn v-bind:id = "post.id" @clickHandler = "clickHandler"></VBtn>
</div> `,
methods:{
clickHandler(val){
this.$emit("fatherHandler",val)
}
},
created(){
console.log(this);
},
}; let App = {
data(){
return {
text:"我是父组件的数据",
post:{
id:1,
title:"My Journey with Vue"
}
}
},
template:`
<div id="a">
我是父组件的{{ post.id }}
<Vheader :msg = "text" v-bind:post = "post" @fatherHandler = "father_handler"></Vheader>
</div>
`,
methods:{
father_handler(val){
console.log(val);
this.post.id = val;
}
},
components:{
Vheader
},
created(){
console.log(this);
},
}; new Vue({
el:"#app",
data(){
return {
msg:"alex"
}
},
created(){
console.log(this);
},
template:`<App />`,
components:{
App
}
})
</script>
</body>
</html>
7.平行组件传值
使用$on()和$emit()绑定的是同一个实例化对象
A===>B传值
1.B组件中要使用$on("事件的名字",function(){})
2.A组件中使用$emit("事件的名字",值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7</title>
</head>
<body>
<div id="app">
<App/>
</div>
<script src="../vue/dist/vue.js"></script>
<script>
let bus = new Vue();
// A=>B B要声明事件 $on("事件的名字",function(val){}) A要触发的事件 $emit("A组件中声明的事件名","值")
//前提,这两个方法必须绑定在同一个实例化对象(bus)
Vue.component("Test2",{
data(){
return {
text:""
}
},
template:`
<h2>{{ text }}</h2>
`,
methods:{},
created(){
bus.$on("testData",(val)=>{
this.text = val;
})
}
}); Vue.component("Test",{
data(){
return {
msg:"我是子组件的数据"
}
},
props:["txt"],
template:`
<button @click = "clickHandler">{{ txt }}</button>
`,
methods:{
clickHandler(){
bus.$emit("testData",this.msg)
}
}
}); let Vheader = {
data(){
return {txt:"wusr"}
},
template:`
<div class="header">
<Test :txt = "txt"/>
<Test2 />
</div>
`
}; let App = {
data(){
return {}
},
template:`
<div class="app">
<Vheader />
</div>
`,
components:{
Vheader
}
}; new Vue({
el:"#app",
data(){
return {}
},
components:{
App
}
}) </script>
</body>
</html>
总结：
1.父往子传值：在父组件中的template中的子组件名的标签中写入要传的值，子组件通过props接收父组件传过来的值
2.子往父传值：在子组件中this.$emit("事件名"，值)，在父组件中任意标签中(例如<button @事件名="父组件自定义的事件名">),然后在父组件中的methos中写父组件自定义的事件名的方法
3.平行组件传值：先在main.js中定义全局对象(let bus = new Vue())，
父（子）往 子（父）传值：
传值的一方：this.$bus.$emit("事件名"，name)
接收值的一方：this.$bus.$on("事件名"，name=>{this.name=name})
Vue的基本使用(二)的更多相关文章
- vue项目搭建 （二） axios 封装篇
vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- Vue模板语法（二）
Vue基础模板语法 二 1. 样式绑定 1.1 class绑定 使用方式:v-bind:class="expression" expression的类型:字符 ...
- Vue源码分析(二) : Vue实例挂载
Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...
- 手牵手，从零学习Vue源码 系列二（变化侦测篇）
系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 陆续更新中... 预计八月中旬更新完毕. 1 概述 Vue最大的特点之一就是数据驱动视 ...
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二九║ Nuxt实战：异步实现数据双端渲染
回顾 哈喽大家好!又是元气满满的周~~~二哈哈,不知道大家中秋节过的如何,马上又是国庆节了,博主我将通过三天的时间,给大家把项目二的数据添上(这里强调下,填充数据不是最重要的,最重要的是要配合着让大家 ...
- vue实战记录（二）- vue实现购物车功能之创建vue实例
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...
- VUE 多页面配置(二)
1. 概述 1.1 说明 项目开发过程中会遇到需要多个主页展示情况,故在vue单页面的基础上进行配置多页面开发以满足此需求,此记录为统一配置出入口. 2. 实例 2.1 页面配置 使用vue脚手架搭建 ...
- Vue源码学习(二）$mount() 后的做的事(1)
Vue实例初始化完成后,启动加载($mount)模块数据. (一)Vue$3.protype.$mount 标红的函数 compileToFunctions 过于复杂,主要是生 ...
- vue axios 封装（二）
封装二: http.js import axios from 'axios' import storeHelper from './localstorageHelper' // 全局设置 const ...
随机推荐
- CPU多核控速
初学者很多对自己开发的软件使用硬件资源的时候并不注意,造成写出的东西不是很满意. 一般有两种情况: 1.写的都是同步单线程任务,不管你电脑有多少个核都不关我事 我就用你1个核所以不管怎么样都不会把CP ...
- 跨越DLL边界传递CRT对象潜在的错误
跨越DLL边界传递CRT对象潜在的错误 翻译:magictong(童磊)2013年5月 版权:microsoft 原文地址:http://msdn.microsoft.com/en-us/librar ...
- 不仅仅是百万级TCP长连接框架 t-io
t-io: 不仅仅是百万级TCP长连接框架 t-io是基于jdk aio实现的易学易用.稳定.性能强悍.将多线程运用到极致.内置功能丰富的即时通讯框架(广义上的即时通讯,并非指im),字母 t 寓意t ...
- Oracle PL/SQL编程
一.PL/SQL简介 1.概念:PL/SQL是Oracle在标准SQL语言上的过程性扩展. 2.优点和特性 提高应用程序的运行性能 提供模块化的程序设计功能 允许定义标示符 具有过程语言控制结构 具备 ...
- Oracle高级查询、事物、过程及函数
一.SQL函数 1.分类:单行函数(日期.数值.转换.字符等),多行函数,也称为分组函数(max.min.avg.sum.row_number.rank等). 2.数值函数 abs(n):求数字n的绝 ...
- java之jdbc学习——QueryRunner
jdbc是ORM框架的基础,但将数据库中的表映射到java对象,并进行增删改查,并不是一件简单的事情. 涉及到jdbc.注解和反射的一些基础知识. 以下内容来自网友的分享,并做了一些增减,作为笔记记录 ...
- Android开发之旅(1) 之 Android 开发环境搭建
工作室原创出品,欢迎转载,欢迎交流. 转载请注明原文:http://www.cnblogs.com/wangleiblog/p/6019063.html Android开发之旅目录 1 前言 很多朋友 ...
- Redis---学习笔记（更新中）
一.基本命令 #查看所有键 keys * #查看指定键 keys key #查看模糊键 keys ke* keys ke? keys ke[a-z] keys ke\? #判断键是否存在 exists ...
- 【Idea】JUnit单元测试%MODULE_WORKING_DIR%' does not exist
Idea执行单元测试时报错:上午9:35 Error running 'MobileMessageImplTest.java': Cannot start process, the working d ...
- 如何使用JavaScript导入和导出Excel文件
本文由葡萄城技术团队于原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript是一个涵盖多种框架.直译式.可以轻松自定义客户端的脚本 ...