vue - 基础(3)
1.数据的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"> <label for="username">用户名：</label>
<input type="text" id="username" v-model="msg">
<p>{{ msg }}</p>
<textarea name="" id="" v-model="msg"></textarea> <input type="checkbox" id="checked" v-model="checked">
<label for="checked">{{ checked }}</label>
<!--多个复选框 使用列表保存-->
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span> <br>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
<!--懒监听 只有回车之后才会将数据同步-->
<input type="text" v-model.lazy="msg">
<!--数字显示-->
<input type="number" v-model.number="age">
<!--清除前后空格-->
<input type="text" v-model.trim="msg">
</div>
<script src="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>Title</title>
</head>
<body>
<div id="app">
<input type="text" :value="msg" @input="changeHandler">
<p>{{ msg }}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return {
msg:'alex'
} },
methods:{
changeHandler(e){
console.log(e);
this.msg = e.target.value
}
}
})
</script>
</body>
</html>
3.局部组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
<script src="vue.js"></script>
<script>
//如果仅仅是实例化vue对象中，既有el又有template，如果template中
//定义模板内容，那么template模板优先级大于el // App header aside content
//1声子 Vue 中组件的名字 首字母大写，跟标签区分 组建中的data必须是一个函数，热切要有return一个对象
let App = {
data(){
return {
text:"日天"
}
},
template:`
<div>
<h2>{{ text }}</h2>
</div>
`,
methods:{ }
}; new Vue({
el:"#app",
data(){
return {
msg:"alex"
}
},
//3用子
template:`
<div class="app">
<App />
</div> `,
components:{
//2挂子
// 如果key和value一样 可以只写一个
// App:App
App
} })
</script>
</body>
</html>
4.局部组件的使用更改（全局组件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
<script src="vue.js"></script>
<script>
//如果仅仅是实例化vue对象中，既有el又有template，如果template中
//定义模板内容，那么template模板优先级大于el //第一个参数是组件的名字，第二个参数 options参数 它是全局组件
//<slot></slot> solt是vue中提供的内容组件 ，它会去分发内容
Vue.component("VBtn",{
data(){
return { }
},
template:`
<button>
<slot></slot>
</button> `
}); // App header aside content
//1声子 Vue 中组件的名字 首字母大写，跟标签区分 组建中的data必须是一个函数，热切要有return一个对象
let Vheader = {
data(){
return { }
},
//template定义模板内容
//Component template should contain exactly one root element
template:`
<div>
<h2>日天</h2>
<h2>日天</h2>
<VBtn>登录</VBtn>
<VBtn>注册</VBtn>
<VBtn>按钮</VBtn>
<VBtn>提交</VBtn>
</div>
`
} let App = {
data(){
return {
text:"日天"
}
},
template:`
<div>
<h2>{{ text }}</h2>
<Vheader></Vheader>
<VBtn>删除</VBtn>
<br>
</div>
`,
methods:{ },
components:{
Vheader
}
}; new Vue({
el:"#app",
data(){
return {
msg:"alex"
}
},
//3用子
template:`
<div class="app">
<App />
</div> `,
components:{
//2挂子
// 如果key和value一样 可以只写一个
// App:App
App
} })
</script>
</body>
</html>
5.父往子传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
<script src="vue.js"></script>
<script>
//如果仅仅是实例化vue对象中，既有el又有template，如果template中
//定义模板内容，那么template模板优先级大于el //第一个参数是组件的名字，第二个参数 options参数 它是全局组件
//<slot></slot> solt是vue中提供的内容组件 ，它会去分发内容
Vue.component("VBtn",{
data(){
return { }
},
template:`
<button>
{{ id }}
</button> `,
props:["id"]
}); // App header aside content
//1声子 Vue 中组件的名字 首字母大写，跟标签区分 组建中的data必须是一个函数，热切要有return一个对象
let Vheader = {
data(){
return { }
},
//template定义模板内容
//Component template should contain exactly one root element
template:`
<div>
<h2>日天</h2>
<h2>{{ msg }}</h2>
<h2>{{ post.title }}</h2>
<VBtn :id="post.id">提交</VBtn>
</div>
`,
props:["msg","post"]
} let App = {
data(){
return {
text:"我是父组件的数据",
post:{
id:1,
title:"My Journey with Vue"
}
}
},
template:`
<div id="a"> <Vheader :msg="text" :post="post"></Vheader> </div>
`,
methods:{ },
components:{
Vheader
}
}; new Vue({
el:"#app",
data(){
return {
msg:"alex"
}
},
//3用子
template:`
<div class="app">
<App />
</div> `,
components:{
//2挂子
// 如果key和value一样 可以只写一个
// App:App
App
} })
</script>
</body>
</html>
6.子往父传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
<script src="vue.js"></script>
<script>
//如果仅仅是实例化vue对象中，既有el又有template，如果template中
//定义模板内容，那么template模板优先级大于el //第一个参数是组件的名字，第二个参数 options参数 它是全局组件
//<slot></slot> solt是vue中提供的内容组件 ，它会去分发内容
Vue.component("VBtn",{
data(){
return { }
},
template:`
<button @click="clickHandler">
{{ id }}
</button> `,
props:["id"],
methods:{
clickHandler(){
this.id++;
// this.$emit('父组件声明自定义的事件','传值');
this.$emit("clickHandler",this.id)
}
}
}); // App header aside content
//1声子 Vue 中组件的名字 首字母大写，跟标签区分 组建中的data必须是一个函数，热切要有return一个对象
let Vheader = {
data(){
return { }
},
//template定义模板内容
//Component template should contain exactly one root element
template:`
<div>
<h2>我是header组件</h2>
<h2>日天</h2>
<h2>{{ msg }}</h2>
<h2>{{ post.title }}</h2>
<VBtn :id="post.id" @clickHandler="clickHandler">提交</VBtn>
</div>
`,
props:["msg","post"],
methods:{
clickHandler(val){
alert(val);
this.$emit("fatherHandler",val)
}
}
} let App = {
data(){
return {
text:"我是父组件的数据",
post:{
id:1,
title:"My Journey with Vue"
}
}
},
template:`
<div id="a"> <Vheader :msg="text" :post="post" @fatherHandler="father_handler"></Vheader> </div>
`,
methods:{
father_handler(val){
this.post.id = val
}
},
components:{
Vheader
}
}; new Vue({
el:"#app",
data(){
return {
msg:"alex"
}
},
//3用子
template:`
<div class="app">
<App />
</div> `,
components:{
//2挂子
// 如果key和value一样 可以只写一个
// App:App
App
} })
</script>
</body>
</html>
7.平行组件传值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<App/>
</div>
<script src="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)=> {
alert(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:'wusir'
} },
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>
vue - 基础(3)的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
随机推荐
- [THUPC2018]生生不息（？？？）
SB题,写来放松身心. 首先 $n,m\le 5$,这是可以打表的. 本地怎么对于一个 $n,m$ 求答案?此时虽然复杂度不需要太优,但是还是得够快. 一个想法是枚举每个初始状态,不停模拟.因为总状态 ...
- [LeetCode] 213. House Robber II 打家劫舍之二
You are a professional robber planning to rob houses along a street. Each house has a certain amount ...
- python实现的WebSocket客户端
code #coding=utf- import json import time from websocket import create_connection ws = create_connec ...
- Qt Quick 基本元素初体验
Qt Quick 作为 QML 语言的标准库,提供了很多基本元素和控件来帮助我们构建 Qt Quick 应用,这节我们简要地介绍一些 Qt Quick 元素. 一. 基本可视化项 1.1 Item I ...
- 召唤神龙Ladon强化Cobalt Strike
Ladon5.5 20191109 wiki update 20191114 前言 Ladon 5.5支持Cobalt Strike,内置39个功能模块 加载脚本K8Ladon.cna,通过Ladon ...
- HTML+css基础 表格标签table Table标签属性 td标签属性
表格标签table: 他是由行与列构成,最小单位是单元格. 行标签 <tr></tr> 单元格标签<td></td> Table标签属性: Bor ...
- 机器学习之Artificial Neural Networks
人类通过模仿自然界中的生物,已经发明了很多东西,比如飞机,就是模仿鸟翼,但最终,这些东西会和原来的东西有些许差异,artificial neural networks (ANNs)就是模仿动物大脑的神 ...
- Prometheus 告警收敛
Prometheus 告警收敛 告警面临最大问题,是警报太多,相当于狼来了的形式.收件人很容易麻木,不再继续理会.关键的告警常常被淹没.在一问题中,alertmanger在一定程度上得到很好解决. P ...
- ifame内嵌页面全屏完美展示
<body style= marginwidth= marginheight= width='100%' height='100%' allowfullscreen='true' src='ht ...
- 用友U9 查看功能页面实体
对着当前页面右键查看属性: 在链接后面加上&__dm=true 在打开的页面将鼠标放到字段上,可以看到页面实体是那一个.