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”跟 ...
随机推荐
- Linux DNS分离解析与构建智能DNS服务器
一 构建DNS分离解析 方法一 : [root@localhost ~]# vim /etc/named.conf [root@localhost ~]# cd /var/named/ [root@l ...
- [LeetCode] 350. Intersection of Two Arrays II 两个数组相交之二
Given two arrays, write a function to compute their intersection. Example 1: Input: nums1 = [1,2,2,1 ...
- oracle--介质恢复和实例恢复的基本概念
1.概念 REDO LOG是Oracle为确保已经提交的事务不会丢失而建立的一个机制.实际上REDO LOG的存在是为两种场景准备的,一种我们称之为实例恢复(INSTANCE RECOVERY),一种 ...
- 深入学习 esp8266 wifimanager源码解析（打造专属自己的web配网）
QQ技术互动交流群:ESP8266&32 物联网开发 群号622368884,不喜勿喷 单片机菜鸟博哥CSDN 1.前言 废话少说,本篇博文的目的就是深入学习 WifiManager 这个gi ...
- PowerShell的异常处理办法
$ErrorActionPreference = 'Stop' Try{ # C:\xxx 不存在 Copy-Item C:\xxx -ErrorAction Stop } Catch ...
- Qt Quick 基本元素初体验
Qt Quick 作为 QML 语言的标准库,提供了很多基本元素和控件来帮助我们构建 Qt Quick 应用,这节我们简要地介绍一些 Qt Quick 元素. 一. 基本可视化项 1.1 Item I ...
- 详解golang net之netpoll
golang版本1.12.9:操作系统:readhat 7.4 golang的底层使用epoll来实现IO复用.netPoll通过pollDesc结构体将文件描述符与底层进行了绑定.netpoll实现 ...
- HandlerInterceptorAdapter
handler,是指controller的@Controller注解下的整个方法名
- 容斥原理--计算错排的方案数 UVA 10497
错排问题是一种特殊的排列问题. 模型:把n个元素依次标上1,2,3.......n,求每一个元素都不在自己位置的排列数. 运用容斥原理,我们有两种解决方法: 1. 总的排列方法有A(n,n),即n!, ...
- C++分治策略实现二分搜索
问题描述: 给定已排好序的n个元素组成的数组,现要利用二分搜索算法判断特定元素x是否在该有序数组中. 细节须知: (1)由于可能需要对分治策略实现二分搜索的算法效率进行评估,故使用大量的随机数对算法进 ...