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 ...
随机推荐
- linux下编译qt5.6.0静态库（使用./configure --help来看看都有哪些参数。超详细，有每一个模块的说明。如果改变了安装的目录，需要到安装目录下的bin目录下创建文件qt.conf）（乌合之众）good
linux下编译qt5.6.0静态库 linux下编译qt5.6.0静态库 configure生成makefile 安装选项 Configure选项 第三方库: 附加选项: QNX/Blackberr ...
- Qt之获取本机网络信息（超详细）
经常使用命令行来查看一些计算机的配置信息. 1.首先按住键盘上的“开始键+R键”,然后在弹出的对话框中输入“CMD”,回车 另外,还可以依次点击 开始>所有程序>附件>命令提示符 2 ...
- Qt中由表中单元格的QModelIndex获取Global Pos的正确方法
一直在尝试从单元格的行列索引(QModelIndex)获取其单元格的全局坐标(Global Pos)的方法,以期待在指定单元格附近弹出帮助信息.由View中的columnViewportPositio ...
- Windows服务器下的IIS和Apache性能比较
目前最流行的建立网站的服务工具就要属Apache与IIS了.那么他们之间到底哪个性能更好呢?到底哪个工具才是最适合我们的呢?最近我也对这方面的问题进行了一番研究. 如果是基于Linux平台的话,那不必 ...
- 请你讲一讲JavaScript有哪些数据类型, 数据类型判断有哪些方法?
js的8种数据类型 JavaScript中有8种数据类型, 包括基本数据类型(number, string, boolean, null, undefined, symbol, bigint)和引用数 ...
- 记录 nginx和php安装完后的URL重写，访问空白和隐藏index.php文件的操作方法
sudo cd /etc/nginx/; sudo vi fastcgi_params; 1.URL重写 如果你的url参数不是用?xxx传递,而是自定义的,比如用/xx/xx/xx的方式传递,那么在 ...
- 10 jQuery的事件绑定和解绑
1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (String) : 事件类型 data ( ...
- 04 body中的相关标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- spring 5.x 系列第16篇 —— 整合dubbo (代码配置方式)
文章目录 一. 项目结构说明 二.项目依赖 三.公共模块(dubbo-ano-common) 四. 服务提供者(dubbo-ano-provider) 4.1 提供方配置 4.2 使用注解@Servi ...
- Java:synchronized关键字引出的多种锁
前言 Java 中的 synchronized关键字可以在多线程环境下用来作为线程安全的同步锁.本文不讨论 synchronized 的具体使用,而是研究下synchronized底层的锁机制,以及这 ...