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”跟 ...
随机推荐
- CSS换行知识
换行规则 CSS可以指定文字多行时换行的规则,说白了就是指定哪些地方可以换行 相关属性 word-break The word-break CSS property sets whether line ...
- [LeetCode] 209. Minimum Size Subarray Sum 最短子数组之和
Given an array of n positive integers and a positive integer s, find the minimal length of a contigu ...
- 一键脚本解决Windows系统更新错误（0x80070003）
新建文本,写入以下内容并保存为bat文件 REM 解决系统更新错误(0x80070003) pause net stop "Windows Update" rd /s/q &quo ...
- C# HTTP系列8 GET与POST对比说明
系列目录 [已更新最新开发文章,点击查看详细] HTTP协议,即超文本传输协议(Hypertext transfer protocol).是一种详细规定了浏览器和万维网(WWW = Worl ...
- 微信企业号SDK
1. 微信企业号SDK class class_wxqiye { var $corpid = CorpID; var $corpsecret = CorpSecret; var $agentid = ...
- 解决mac/win双系统，mac原生读写NTFS分区重启后失效的问题
安装mac/win双系统,然后在mac下启用原生的NTFS分区读写功能,并将分区创建桌面快捷方式后,会发现有时候进入win后再进mac,原来创建的分区桌面快捷方式是白色的图标,并且分区也无法打开,这个 ...
- gitbub高效查找优秀项目
in:name example 名字中带有example的项目 in:readme example 在readme文件带有example的项目 in:description example 描述里 ...
- 【java】javac编译多个有依赖关系的java文件为class文件
历史文章: [jar]JDK将单个的java文件打包为jar包,并引用到项目中使用[MD5加密] [java]javac命令在win10不可用,提示javac不是内部或外部命令,也不是可运行的程序[解 ...
- java.lang.NoClassDefFoundError: javax/el/ELManager
今天搭建一个ssm框架的项目,报了一个令我怀疑人生的错误: java.lang.NoClassDefFoundError: javax/el/ELManager 网上说出现这种错,大概有以下两个原因: ...
- 单片机成长之路（51基础篇） - 026 基于stm89c52之单片机看门狗
基于stc89c52的看门狗,代码如下: main.c #include "stc89c5x_Quick_configuration.h" // 自定义头文件 #include & ...