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”跟 ...
随机推荐
- day 22
Creativity requires the courage to let go of certainties. 创新需要勇气承担不确定性.
- [POI2014]RAJ（最短路，拓扑排序）
对于一个点 \(x\) 如何求答案? 由于这个图是个有向无环图,可以先拓扑排序一遍,求出每个点的拓扑序,从起点到它的最长路 \(d2\),从它到终点的最长路 \(d1\).(我写代码是这么写的,注意顺 ...
- idea插件篇之java内存分析工具(JProfiler)
前言在运行java的时候有时候想测试云运行时占用内存情况,这时候就需要使用测试工具查看了.在eclipse里面有 Eclipse Memory Analyzer tool(MAT)插件可以测试,而在i ...
- oracle--10.2.0.3升级到11.2.0.4
一,环境 01,待升级的系统 升级仅支持10.2.0.2版本之后的系统,如果不是,请把10G升级至高版本! 本次实验环境10.2.0.3 02,挂载11G系统 03,升级须知 1) 做好备份 二,DB ...
- Elasticsearch由浅入深（五）_version乐观锁、external version乐观锁、partial update、groovy脚本实现partial update
基于_version进行乐观锁并发控制 先构造一条数据出来 PUT /test_index/test_type/ { "test_field": "test test&q ...
- MySQL基础指令和安装
数据库概念 那Mysql能干嘛呢?它就是一款软件,安装在任何一台计算机或者服务器上的时候,只要我告诉它创建一个文件,新增一个数据,删除一个数据它就能帮我去做想要的操作 那我们暂且能不能理解为mysql ...
- sync 异步编程
using System; using System.Net; using System.Threading; using System.Threading.Tasks; namespace Cons ...
- Python处理数据集-1
原数据集的数据格式: 每行为:(test_User, test_Item) negativeItem1 negativeItem2 negativeItem3 …… negativeItem99 即每 ...
- JavaScript 正则表达式匹配成功后的返回结果
原文地址:https://blog.csdn.net/liupeifeng3514/article/details/79005604 使用正则表达式EDIT 正则表达式可以被用于RegExp的exec ...
- struts2被淘汰的原因
Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个Servlet.在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的数据交互.Struts2 ...