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 ...
随机推荐
- 通过使用URLEncoder与URLDecoder进行编码和解码
使用改方法必须导入 java.net包 <%@page import="java.net.*" %> 编码: 当要存储或者发送数据的时候使用,将编码后的字符串再发送或者 ...
- 类成员函数指针的特殊之处（成员函数指针不是指针，内含一个结构体，需要存储更多的信息才能知道自己是否virtual函数）
下面讨论的都是类的非静态成员函数. 类成员函数指针的声明及调用: 1 2 3 4 5 6 7 //pr是指向Base类里的非静态成员函数的指针 //其行参为(int, int),返回值为void vo ...
- 分布式存储系统GlusterFS初体验
摘要: GlusterFS是Scale-Out存储解决方案Gluster的核心,它是一个开源的分布式文件系统,具有强大的横向扩展能力,通过扩展能够支持数PB存储容量和处理数千客户端.GlusterFS ...
- 配置我的Ubuntu Server记（包括桌面及VNC，SSH，NTP，NFS服务） good
跟老板申请买了一台配置相对较好的计算机回来做GPU计算,当然,不能独享,所以做成服务器让大家都来用. 这篇日志用来记录配置过程中遇到的一些问题,以方便下次不需要到处谷歌度娘. 安装Server版系统 ...
- “多团队大规模”开发模式 - 基于SAP HANA平台的多团队产品研发
应用SAP HANA “官方”开发模式的伙伴们在转到“多团队大规模”开发模式时会遇到各式各样的心理不适应的状况,各种纠结.比如GIT Repository和HANA Repository冲突什么的. ...
- jqGrid使用经验分享（一）——jqGrid简单使用、json格式和jsonReader介绍
广大的读者朋友们大家好,很高兴又可以在博客中和大家分享我的开发经验了. 此次,我准备向大家介绍一个非常好用的jQuery表格插件——jqGrid. 如果您在实际项目中遇到web端表格展示功能的需求,又 ...
- Java基础(二) 基本类型数据类型、包装类及自动拆装箱
我们知道基本数据类型包括byte, short, int, long, float, double, char, boolean,对应的包装类分别是Byte, Short, Integer, Long ...
- 9个WebGL的演示
1. WebGL Water This incredible demo is as fluid as you could believe. Raise and drop the ball into ...
- Keepalived双主模式配置流程
实验说明 1)keepalived 支持配置多个VRRP实例,每个实例对应一个业务 2)本次实验将实现 keepalived 的互为主备: 业务A:keepalived01为Master,keepal ...
- IM即时通讯：如何跳出传统思维来设计聊天室架构？
因为视频直播业务的大规模扩张,聊天室这种功能在最近几年又火了起来.本篇文章将会重点挑选聊天室这个典型场景,和大家分享一下网易云信在实现这个功能时是如何做架构设计的. 相关推荐阅读几十万人同时在线的直播 ...