表单输入绑定

数据双向绑定 v-model 绑定相同的属性 当属性变化绑定的标签内容也跟着变化

v-model 只能应用像在input textare select 标签

v-model.lazy 懒监听 不及时更改 当失焦的时候才更改

v-model.number 限制只能输入数字

v-model.trim 取出两边空格

<body>
<div id="app">
<label for="username">用户名:</label>
<input type="text" v-model="msg" id="username">
<p>{{ msg }}</p>
<textarea placeholder="add multiple lines" v-model='msg'></textarea> <input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<br>
<!--多个复选框 使用列表保存-->
<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 v-model.lazy="msg" >
<!--数字显示-->
<input v-model.number="age" type="number">
<!--清除前后空格-->
<input 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>

组件化开发

我们定义的组件全部写在一个文件中,所以认为是全局的将来我们 通过import导入,引用局部组件

2.局部组件

打油诗: 声子 挂子 用子

父子组件可以不使用template,但子组件最好还是有 注意:template中的标签一定要用一个标签包起来不然报这个错

总结:

1)一个子组件挂载到哪个组件,这个组件就是我的父组件;

2)以后模块化开发时,一个组件就是一个文件(一个组件包含了html,css,js),想使用这个组件时导入即可使用

<body>
<div id="app">
<App></App>
</div>
<script src="vue.js"></script>
<script>
//如果仅仅是实例化vue对象中 既有el 又有template,如果template中定义模板的内容
// 那么template模板的优先级大于el
//第一个参数是组件的名字,第二个参数 options参数 它是全局组件
// <slot></slot> slot是vue中提供的内容组件 它会去分发 内容
Vue.component('VBtn',{
data(){
return { }
},
template:`<button>
<slot></slot> </button>`
}) // App header Vaside Vcontent
// 1.声子 Vue中 组件的名字 首字母要大写 跟标签区分 组件中的data必须是个函数 一定要有返回值
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 id="a">
<h2>{{ text }}</h2>
<Vheader></Vheader>
<VBtn>删除</VBtn>
<br>
</div>
`,
methods:{
},
components:{
Vheader
}
} new Vue({
el: '#app',
data() {
return {
msg:'alex'
}
},
template:`<App />`,
components:{
//2.挂子
//如果key和value一样 可以只写一个
//App:App
App
}
}) </script>
</body>

1、声明子

let App = {
data(){
return { }
},
template:`<div> </div>`
}

2.挂子

挂载哪个组件,这个组件就是我的父组件 template中的模板一定要有一个根元素

components:{
# 键和值相同可简写 正常 App:App
App
Son
...
}

3 用子

1 可在template 中使用
template:`
<App /> 或者 <App></App>
`,
2 没有template 可以在引用部分直接用
<div id="app">
<App></App>
</div>

3.组件的嵌套

数据:单向数据流

4.父子组件传值

父==》子

1.在子组件中 使用props声明 可以直接在子组件中任意使用

2.从父组件中接收的值也可以传值给其他组件

3.父组件 要定义自定义的属性

<div id="app">
<App></App> <!-- 使用局部组件App -->
</div>
<script> // 声明一个局部组件Vheader
let Vheader = {
data(){
return { }
},
// 挂载父组件的属性,该组件中就可以使用,从父组件接收到的值也可再传给其子组件
props:['msg','post'],
template:`
<div class="vheader">
<h2>子组件Vheader start</h2>
<p>{{ msg }}</p>
<p>{{ post.title }}</p>
<h2>子组件Vheader end</h2>
</div>
`
}; // 声明一个局部组件App
let App = {
data(){
return {
text:"我是父组件App的数据",
app_post:{
id: 1,
title: 'hello world'
}
}
},
//
template:`
<div class="app">
<Vheader :msg='text' :post='app_post'></Vheader>
</div>
`,
components:{
Vheader // 挂载局部组件Vheader
}
}; new Vue({
el: '#app',
data() {
return {
}
},
components:{
App // 挂载局部组件App
}
})
</script>

子==》父

1、子组件中 通过$emit()触发父组件中自定义的事件

2、父组件中声明自定义的事件介绍

<div id="app">
<App></App> <!-- 使用局部组件App -->
</div>
<script>
// 声明一个全局组件VBtn
Vue.component('VBtn',{
data(){
return {}
},
props:['id'], // 父组件Vheader传递过来的值
template:`
<button @click="clickHandler">{{ id }}</button>
`,
methods:{
clickHandler(){
console.log(this); // 每个组件中的this指的是当前组件对象
// this.$emit('父组件中声明的自定义的事件', ' 传值')
this.id++;
this.$emit('click_Handler', this.id);
}
}
});
// 声明一个局部组件Vheader
let Vheader = {
data(){
return {}
},
props:['post'], // 父组件App传递过来的数据
template:`
<div class="vheader">
<VBtn :id='post.id' @click_Handler="fuClickHandler"></VBtn>
</div>
`,
methods:{
fuClickHandler(val){
this.$emit('fatherHandler', val) // 往父组件App传值
}
}
};
// 声明一个局部组件App
let App = {
data(){
return {
app_post:{
id: 1,
title: 'hello world'
}
}
},
template:`
<div class="app">
{{ app_post.id }}
<Vheader :post='app_post' @fatherHandler="father_handler"></Vheader>
</div>
`,
methods:{
father_handler(val){
this.app_post.id = val
}
},
components:{
Vheader // 挂载局部组件Vheader
}
};
new Vue({
el: '#app',
data() {
return {}
},
components:{
App // 挂载局部组件App
}
})
</script>

5.平行组件传值

使用$on()和$emit() 绑定的是同一个实例化对象

A===>B组件传值

1、声明一个Vue对象(bus 对象), 只是用来传值  

2、B组件中要使用$on(‘事件的名字’,function(){})

3、A组件中使用$emit('事件的名字',值)

4、注意: 记住平行组件传值前提是这两个方法必须绑定在同一个实例化对象(bus)上

<div id="app">
<App></App> <!-- 使用局部组件App -->
</div>
<script>
// TestA ==》 TestB 传值
// 平行组件传值前提:这两个方法必须绑定在同一个实例化对象(bus)上
let bus = new Vue(); // 声明一个Vue对象,只是用来平行组件间传值
// TestB要声明事件 bus.$on('事件的名字', function(val){})
// TestA要触发事件 bus.$emit('TestA组件中声明的事件名', '值')
// 声明一个全局组件TestB
Vue.component('TestB',{
data(){
return {
text: ""
}
},
template:`
<h2>{{ text }}</h2>
`,
created(){
// 声明事件
bus.$on('testData', (val) => { // 注意这里用箭头函数
this.text = val
})
}
});
// 声明一个全局组件TestA
Vue.component('TestA',{
data(){
return {
msg: "我是子组件TestA的数据"
}
},
template:`
<button @click="clickHandler">TestA组件中按钮</button>
`,
methods:{
// 定义触发的函数
clickHandler(){
console.log(bus);
bus.$emit('testData', this.msg)
}
}
});
// 声明一个局部组件Vheader
let Vheader = {
data(){
return {}
},
template:`
<div class="vheader">
<TestA></TestA>
<TestB></TestB>
</div>
`,
};
// 声明一个局部组件App
let App = {
data(){
return {}
},
template:`
<div class="app">
<Vheader></Vheader>
</div>
`,
components:{
Vheader // 挂载局部组件Vheader
}
};
// 根组件,可以没有template属性,直接在el中使用子组件
new Vue({
el: '#app',
data() {
return {}
},
components:{
App // 挂载局部组件App
}
})
</script>

Vue 简单的总结二的更多相关文章

  1. vue简单路由(二)

    在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套. index.html ...

  2. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  3. Vue源码分析(二) : Vue实例挂载

    Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...

  4. 手牵手,从零学习Vue源码 系列二(变化侦测篇)

    系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 陆续更新中... 预计八月中旬更新完毕. 1 概述 Vue最大的特点之一就是数据驱动视 ...

  5. vue项目搭建 (二) axios 封装篇

    vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...

  6. html css的简单学习(二)

    html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...

  7. Win8 Metro(C#)数字图像处理--2.56简单统计法图像二值化

    原文:Win8 Metro(C#)数字图像处理--2.56简单统计法图像二值化  [函数名称] 简单统计法图像二值化 WriteableBitmap StatisticalThSegment(Wr ...

  8. 自己制作一个简单的操作系统二[CherryOS]

    自己制作一个简单的操作系统二[CherryOS] 我的上一篇博客 自己制作一个简单的操作系统一[环境搭建], 详细介绍了制作所需的前期准备工作 一. 一点说明 这个操作系统只是第一步, 仅仅是开机显示 ...

  9. Vue基础系列(二)——Vue中的methods属性

      写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...

随机推荐

  1. pxcook-高效易用的自动标注工具, 生成前端代码

    1.pxcook.sketch(http://www.fancynode.com.cn/pxcook)

  2. elasticsearch负载均衡节点——客户端节点 node.master: false node.data: false 其他配置和master 数据节点一样

    elasticSearch的配置文件中有2个参数:node.master和node.data.这两个参 数搭配使用时,能够帮助提供服务器性能. 数据节点node.master: false node. ...

  3. Arcgis For Android之离线地图实现的几种方式

    为什么要用,我想离线地图的好处是不言而喻的,所以很多人做系统的时候都会考虑用离线地图.在此,我给大家介绍几种Arcgis For Android下加载离线地图的方式. 在Arcgis For Andr ...

  4. Electron 打包时下载 xxx-electron-v1.6.8--x64.zip 文件出错

    Electron 打包时下载 xxx-electron-v1.6.8--x64.zip 文件出错 今天在windows上打包其它平台的Electron应用的时候,由于是第一次,所以总是下载 xxx-e ...

  5. CIL

    CIL 学习 http://www.cnblogs.com/chengxingliang/category/306943.html

  6. Java 实现--时间片轮转 RR 进程调度算法

    时间片轮转(Round-Robin)调度算法是操作系统一种比较公平的进程调度的方式,这种方式使得就绪队列上的所有进程在每次轮转时都可以运行相同的一个时间片. 基本原理 算法实现原理是,按进程到达顺序( ...

  7. 前端之JavaScript 02

    一.函数 // 最基础的函数定义 function f1() { console.log('hello world!'); } f1(); // hello world! // 带参数的函数 func ...

  8. Tomcat启动超时问题Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds

    使用Eclipse启动Tomcat时出现启动超时的问题如下所示: Server Tomcat v7.0 Server at localhost was unable to start within 4 ...

  9. 重温CLR(五)类型和成员基础

    类型的各种成员 类型可以定义以下种类的成员 1 常量 常量是指出数据值恒定不变的符号.这种符号使代码更易阅读和维护.常量总与类型管理,不与类型的实例管理.常量逻辑上总是静态成员. 2 字段 字段表示只 ...

  10. flask的request的用法

    其中在头部取值是这样的,request.headers,得到的是一个字典 参考链接:http://blog.csdn.net/yannanxiu/article/details/53116652