Vue快速学习_第二节
表单输入绑定(v-model)
v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定(注意只在表单这几个可以,实际上就是负责监听用户的输入事件以更新数据)
注意:v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源.
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
text 和 textarea 元素使用
value属性和input事件；checkbox 和 radio 使用
checked属性和change事件；select 字段将
value作为 prop 并将change作为事件。
上面的解释来源于官网,感觉不错就拿过来了,好了,接着来实际操作下看看吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<!--下面是v-model使用实例,双向数据绑定-->
<!--1.input文本使用-->
<input type="text" v-model="msg" placeholder="请输入值">
<p>{{ msg }}</p>
<br>
<!--2.textarea富文本使用,这样一旦一个改变,界面上所有引用的地方都会改变,
在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。-->
<textarea v-model="msg" placeholder="富文本输入"></textarea>
<br>
<!--3.单个复选框使用,checked选中就是true,没选中就是false-->
<input type="checkbox" id="checked" v-model="checked">
<!--label的作用就是for关联对应的id标签,点击label文本就相当于点击了input-->
<label for="checked">{{ checked }}</label>
<br>
<!--4.多个复选框使用-->
<div>
<input type="checkbox" id="c1" value="apple" v-model="checked_list">
<label for="c1">apple</label>
<input type="checkbox" id="c2" value="banana" v-model="checked_list">
<label for="c2">banana</label>
<input type="checkbox" id="c3" value="peach" v-model="checked_list">
<label for="c3">peach</label>
<br>
<!--将选择的value值存入checked_list中-->
<span>多选的是: {{ checked_list }}</span>
</div>
<br>
<!--5.单选使用,同样是存储value值-->
<div>
<input type="radio" id="r1" value="apple" v-model="radio_one">
<label for="r1">apple</label>
<input type="radio" id="r2" value="banana" v-model="radio_one">
<label for="r2">banana</label>
<br>
<span>单选的是: {{ radio_one }}</span>
</div>
<br>
<!--6.选择框的使用-->
<div>
<!--v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态,
所以建议用下面的方法,第一个为请选择但是设置disabled-->
<select v-model="selected">
<!--在v-model下select下的option要设置value=""才会默认第一个显示-->
<option disabled value="">请选择</option>
<option>A</option>
<!--有value就会将value值赋值给selected,没有则用文本的B-->
<option value="2">B</option>
<option value="3">C</option>
</select>
<span>你的选择是: {{ selected }}</span>
</div>
<br>
<!--7.多选绑定到一个数组-->
<div>
<!--data里面selecteds为一个空数组-->
<select multiple v-model="selecteds">
<option disabled value="">请选择</option>
<option>A</option>
<!--有value就会将value值赋值给selected,没有则用文本的B-->
<option value="2">B</option>
<option value="3">C</option>
</select>
<span>你的选择是: {{ selecteds }}</span>
</div>
<!--依旧是多选,但是是用v-for动态渲染-->
<div>
<!--select_for赋值了A,因此会默认选中value为A的选项-->
<select v-model="select_for">
<option v-for="(item, index) in option_list" :key="index" :value="item.value">{{ item.text }}</option>
</select>
</div>
<br>
<!--8.值的绑定,对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值),
但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串-->
<input type="radio" v-model="toggle" v-bind:value="bind_value">
<!--value的值变成了动态属性bind_value-->
<span>{{toggle}}</span>
<br>
<!--9.修饰符 .lazy,在“change”时而非“input”时更新 ,也就是输入中不改变msg,回车或确定时改变-->
<input v-model.lazy="msg" >
<br>
<!--10.修饰符 .number,自动将用户的输入值转为数值类型-->
<input v-model.number="age" type="number">
<br>
<!--11.修饰符 .trim,自动过滤用户输入的首尾空白字符-->
<input v-model.trim="msg"> </div>
</body>
<script src="vue.js"></script>
<script>
// 多选列表数据
var options = [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
];
new Vue({
el: '#box',
data(){
return {
msg: '',
checked: false,
checked_list: [],
radio_one: '',
selected: '',
selecteds: [],
option_list: [],
// 初始化给了A,这样select就会选中value为A的选项
select_for: 'A',
toggle: '',
bind_value: '值被绑定了',
age: '',
}
},
created(){
this.option_list = options
}
})
</script>
</html>
组件化开发
全局组件(通用组件可以考虑变成全局组件)
// 声明全局组件, 第一个参数是组件的名字(Vbtn), 第二个参数是options,声明完之后就可以在其他组件调用,不需要挂载
Vue.component('Vbtn', {
data(){
return {
msg: '按钮'
}
},
template:`<button>{{ msg }}</button>`
});局部组件
遵循三步骤: 声子(创建组件), 挂子(挂载到父组件), 用子(父组件使用子组件),下面代码使用包含全局组件的调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<!--直接使用App组件-->
<App/>
</div> </body>
<script src="vue.js"></script>
<script>
/* 注意:如果仅仅是实例化Vue实例化对象中 既有el又有template,如果template中定义模板的内容,
那么template模板的优先级大于el,就会使用template的内容,没有的话就会使用el的内容 */ // 声明全局组件, 第一个参数是组件的名字(Vbtn), 第二个参数是options,声明完之后就可以在其他组件调用,不需要挂载
Vue.component('Vbtn', {
data(){
return {
msg: '按钮'
}
},
// 通过slot插槽分发内容(组件传递内容),就相当于别的组件调用传值会替换slot标签的位置
template:`<button>
<slot></slot>
</button>
`
}); // 定义App下的header区域,第一步声子,,然后App父组件就可以调用了
let Vheader = {
data(){
return {
header_login: '登录',
header_reg: '注册',
}
},
// 定义herader区域的模板内容,使用全局组件Vbtn,界面显示登录和注册按钮
template:`
<div>
<Vbtn>{{ header_login }}</Vbtn>
<Vbtn>{{ header_reg }}</Vbtn>
</div>
`
}; // 1.声子, Vue中 组件的名字首字母必须大写(与标签区分),组件中的data必须是一个函数且要有返回值,这里定义一个App
let App = {
data(){
return {
name: 'liu',
}
},
// 定义App组件内容,使用App组件的内容,注意template里面一定是有一个根标签包裹全部标签,使用Vheader
template:`
<div class="app1">
<h2>{{ name }}</h2>
<Vheader/>
<Vbtn>提交</Vbtn>
</div>
`,
components: {
// 挂载header组件
Vheader
}
}; new Vue({
el:'#box',
data(){
return { }
},
// 组件挂载
components:{
// 2.挂子,如果key和value(App:App)一样可以只写一个(App)
// App:App
App
}
}) </script>
</html>组件的嵌套(单向数据流)
父子组件传值
父往子传值(props)
在子组件中 使用props声明(注意要声明一个数组),可以直接在子组件中任意使用
// 子组件Vheader
let Vheader = {
data(){
return {
}
},
// 在子组件中 使用props声明(注意要声明一个数组),可以直接在子组件中任意使用
props:['t_name', 'title', 'post2'],
// 定义herader区域的模板内容,下面是使用父组件传过来的值
template:`
<div>
<span>{{ t_name }}</span>
<span>{{ title }}</span>
<span>{{ post2.title }}</span>
</div>
`
};父组件要定义自定义属性
// 父组件App
let App = {
data(){
// 父组件的数据
return {
name: 'liu',
post1: {
id: 1,
title: 'My Journey with Vue'
},
post2: {
id: 2,
title: 'test post'
}
}
},
// 传入一个对象的所有属性可以v-bind="post1"也可以:post2="post2",第一种相当于 v-bind:id="post1.id"和v-bind:title="post1.title",所以在子组件中直接接收id和title并使用.
template:`
<Vheader :t_name="name" v-bind="post1" :post2="post2"></Vheader>
`,
components: {
// 挂载header组件
Vheader
}
};
子往父传值(通过事件向父级组件传值,示例也包含了父向子传值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<!--直接使用App组件-->
<App/>
</div> </body>
<script src="vue.js"></script>
<script>
// 全局组件Vbtn
Vue.component('Vbtn', {
data(){
return {
}
},
props:['id'],
template:`<button @click="clickHandler">
{{ id }}
</button>
`,
methods:{
// 1.点击触发clickHandler方法,接着$emit就去触发父组件的事件方法
clickHandler(){
// $emit是vue方法,第一个参数写父组件声明自定义的事件,第二个参数传值
this.$emit('headerClick', this.id)
}
}
}); // Vheader组件
let Vheader = {
data(){
return {
}
},
props:['post'],
// 2.父组件自定义事件,子组件点击按钮后通过$emit()触发父组件的headerClick中的headerHandler方法
template:`
<div>
<Vbtn :id="post.id" @headerClick="headerHandler"></Vbtn>
</div>
`,
methods: {
// 3.触发方法后,接着又去触发app父组件的appClick事件
headerHandler(val){
this.$emit('appClick', val)
}
}
}; // App父组件
let App = {
data(){
return {
name: 'liu',
post: {
id: 1,
title: 'My Journey with Vue'
},
}
},
// 4.header子组件通过$emit()触发父组件的appClick中的appHandler方法
template:`
<div class="app1">
<Vheader :t_name="name" :post="post" @appClick="appHandler"></Vheader>
</div>
`,
components: {
// 挂载header组件
Vheader
},
methods:{
// 5.该方法就是接收子组件的传值,并加1,重新赋值渲染界面
appHandler(val){
val++;
this.post.id = val;
}
}
}; new Vue({
el:'#box',
data(){
return {
}
},
// 组件挂载
components:{
App
}
}) </script>
</html>
平行组件传值
注意:A->B传值,那么B要声明事件,通过$on('事件的名称', function(){}), A则要触发事件 $emit('B组件中声明的事件名', '值val'),还有记住,前提条件是这两个方法必须绑定在同一个实例化对象中(比如let bus = new Vue()),同时绑定到bus上
let bus = new Vue();
// 全局组件Test, Test向Vheader传值msg, 因此$emit('Vheader组件中声明的事件名', '值val')
Vue.component('Test', {
data(){
return {
msg: '我是全局子组件的数据',
}
},
template:`<button @click="clickHandler">
按钮
</button>
`,
methods:{
clickHandler(){
// $emit和$on的事件要一样
bus.$emit('testData', this.msg)
}
}
}); // Vheader组件
let Vheader = {
data(){
return {
// 定义一个text接收msg
text: ''
}
},
template:`
<div>
<Test />
{{ text }}
</div>
`,
methods: {
},
// 接收$emit()传过来的值
created(){
// 这里的是bus调用,this指的是bus,所以要指向Vheader就需要用箭头函数指向父级
bus.$on('testData', (val) => {
this.text = val;
})
}
};
Vue快速学习_第二节的更多相关文章
- Vue快速学习_第一节
之前写CRM都是Django前后端一起写的,在大部分项目中实际上前后端是分离的,因此我们需要学习一个前端框架来进行前端页面的编写,这里选择了Vue进行学习,好了开始学习吧. 1.ES6部分知识点学习 ...
- Vue快速学习_第五节
axios安装及使用 网站文档地址:https://www.kancloud.cn/yunye/axios/234845 1.npm安装 cnpm install axios 2.// 在main.j ...
- Vue快速学习_第四节
获取原生的DOM方式($.refs) 给标签或者组件 添加ref <div ref = 'liu'>test</div> <Home ref = 'home'>&l ...
- Vue快速学习_第三节
过滤器 局部过滤器(组件内部使用的过滤器,跟django的很像, filters: {过滤器的名字: {function(val, a,b){}}} 全局过滤器(全局过滤器,只要过滤器一创建,在任何组 ...
- android内部培训视频_第二节 布局基础
第二节:布局入门 一.线性布局 需要掌握的属性: 1.orientation:排列方式 vertical:垂直 Horizontal:水平 2.weight:水平布局的权重 3.gravity:子控件 ...
- [ExtJS5学习笔记]第二节 Sencha Cmd 学习笔记 使你的sencha cmd跑起来
本文地址: http://blog.csdn.net/sushengmiyan/article/details/38313537 本文作者:sushengmiyan ----------------- ...
- VUE的学习_从入门到放弃（一）
一.vue的功能及作用 工作方式如下 1.不用操作DOM 2.单页面应用web项目 简称:SPA 3.当下各种新框架都采用的类似Vue或者类似React的语法去作为主语法,微信小程序/MpVue... ...
- 【PHP快速入门】 第二节 php基本语法
1.什么地方能写PHP代码? php代码需要写在php标识符内,就是这个东西: 在我们编写一个php程序时,必须要在这个文件里面写上 2.PHP语句要不要加分号? 有的地方要加,有的地方不要加.(似乎 ...
- Linux 基础学习（第二节）
free命令用于显示当前系统中内存的使用量信息,格式为:“free [-h]”. 为了保证Linux系统不会突然卡住宕机,因此内存使用量应该是运维人员时刻要关注的数据啦,咱们可以使用-h参数来以更人性 ...
随机推荐
- DataTemplate
DataTemplate作用是布局+数据绑定 使用DataTemplate 同时完成样式布局和数据绑定 <Window.Resources> <DataTemplate x:Key= ...
- ASP Get请求
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 检查Android是否支持指纹识别以及是否已经录入指纹
原文:检查Android是否支持指纹识别以及是否已经录入指纹 Android M 开始,系统中加入了指纹相关功能. 主要用到的类为:FingerprintManager 只提供三个方法: 返回值 方法 ...
- 如何获取app配置文件内容
App.config: <appSettings> <add key="FCPConnection" value="Data Source=192.16 ...
- javascript真假(true/false)值
下面列出的值被当做假(false): false null undefined 空字符串 ' ' 数字 0 数字 NaN $(document).ready(function(){ var array ...
- 【Linux】PuTTY----------windows访问Linux 快捷方便
第一步:百度PuTTY,下载好后直接运行,界面如下: 第二步:后输入IP:10.45.XX.XX,直接点击open按钮 第三步:输入用户名: 第四步:密码~ 现在,您就可以对你访问的linux设备进行 ...
- Windows 10 (IIS 10)安装Microsoft Web Farm Framework Version 2.2 for IIS7问题
But I got an error message "iis version 7.0 or greater is required to install Web Farm Framewor ...
- nyoj7——街区最短问题
描述 一个街区有很多住户,街区的街道只能为东西.南北两种方向. 住户只可以沿着街道行走. 各个街道之间的间隔相等. 用(x,y)来表示住户坐在的街区. 例如(4,20),表示用户在东西方向第4个街道, ...
- 使用 acl 编写 UDP 网络程序（UDP 重传及可靠性机制）
在当今网络世界,虽然大部分网络应用都是基于 TCP 的,但有时 UDP 的网络通信也有用武之处.acl 的网络库中不仅提供了基于 TCP 的网络套接字流,同时也提供了 UDP 的网络库(目前 acl ...
- 当程序调用dll时获取dll路径，DLL中获取自身的句柄
当程序调用dll时,获取dll路径的方法: HMODULE hMod = GetModuleHandle(_T("axload.dll")); if (hMod != NULL) ...