vue学习之路 - 2.基本操作(上)
基本操作(上)
本章节简介:
vue的安装
vue实例创建
数据绑定渲染
表单数据双向绑定
事件处理
安装
安装方式有三种:
一、vue官网直接下载
http://vuejs.org/js/vue.min.js
二、使用CDN方法
- BootCDN(国内) :https://cdn.bootcss.com/vue/2.2.2/vue.min.js, (国内不稳定)
- unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。(推荐使用)
- cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js,如(<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>)
二、使用node.js的npm包管理工具下载
npm install vue
Vue实例
new Vue({
el : ' ' ,
data : { },
methods : { }
}
});
vue实例中几个最基本的属性el、data、methods,作用如下:
- el
■ 指定被Vue管理的模板入口,网页中的DOM节点
■ 作为模板入口的DOM节点不能是body、html
■ 必须是一个普通的HTML标签节点,一般是某个 div
- data
■ 作用:数据驱动试图中的数据
■ 不是什么数据都往里面初始化的,一般是根据你的视图来初始化使用:数据驱动视图功能的数据
■ data中的成员一般叫做和视图交互的响应式数据成员
■ 以前想要操作DOM,必须给DOM起一个id搞一个标识。现在不需要了,只需要在data中初始化一个数据成员,然后再模板中绑定使用这个成员,我们就可以通过修改数据的方式来改变视图显示
■ 核心就是把DOM操作思想转变成“数据驱动视图”
- methods
■ 一般用来定义事件处理函数
■ 虽然我们可以把方法写到data中,但是在Vue中更推荐把所有方法都写到methods属性中。因为这样做更加合理,数据和方法分开,分门别类。
■ 注意:methods中不允许有和data中重名的成员
数据绑定渲染
文本绑定:{{ }}
- mustache语法 ( 八字胡 ) ,中括号括号里面可以是数据变量或者表达式
示例:
<h1>{{ message }}</h1>
属性绑定:v-bind
- 完整写法: v-bind:属性名称=”数据变量或表达式”
- 简写方式: :属性名称=”数据变量或表达式”
示例:
<!-- 完整写法 -->
<input type="text" v-bind:value="message">
<!-- 简写 -->
<input type="text" :value="message">
下面举例:数据和属性绑定的几种用法和常见错误:
<!-- 下面以data中的message的各种绑定形式举例: -->
<!-- 普通文本数据绑定 -->
<!--
正确绑定方式
-->
<h1>{{ message }}</h1> <!--
错误绑定方式 : 这里表示的是字符串 message
{{ }}内不需要加引号,如果加了引号,就会把 message当做字符串处理,而不是data中的数据成员
-->
<h1>{{ 'message' }}</h1> <!-- 这里表示的是数字 123 ,不和任何数据有关联 -->
<h1>{{ 123 }}</h1> <!-- 属性绑定方式 -->
<!--
错误的用法,属性绑定需要用 v-bind 指令进行绑定,而不能使用八字胡语法
-->
<h1 foo="{{ message }}">测试文本</h1> <!--
正确的属性绑定方式: 完整写法(简写去掉 v-bind 只用冒号即可)
-->
<h1 v-bind:foo="message">测试文本</h1> <!--
错误的绑定方式 : 同理这里表示的是字符串
-->
<h1 v-bind:foo="'message'"></h1>
上面所说的表达式,是指一些简单的Java Script表达式,如下所示:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id "></div>>
注意:普通的文本数据绑定和属性绑定都是单向绑定
- 数据改变,视图跟着变
- 视图改变,数据不变
对有些特殊属性,作用方式有所不同,如 class 和 checked
特殊属性class:
- v-bind:class=”{类名:布尔值}”
■ 当布尔值为true的时候,这作用这个类名
■ 当布尔值为false的时候,这去除这个类名
基本操作如下:
<!-- 当item.done 为true的时候,类 complete 就对当前 <li> 起作用 -->
<li v-bind:class=" { complete : item.done } ">
<a href="">{{ item.title }}</a>>
</li>
特殊属性checked:
checked在html标签中只要有checked属性即为选中的意思,无需true或flase,但在vue中处理了这个误解人的属性,v-bind:checked=“布尔值” ,只有布尔值为true时才有checked属性。
表单数据双向绑定
表单标签的数据绑定需要使用v-model指令来操作,因为表单数据是和用户交互的数据。
v-model指令绑定的数据是双向绑定的。
数据←→视图(相互影响)
表单标签如:文本、多行文本、复选框、单选按钮、选择列表等等。
示例:
<!-- 注意 : 非表单元素不可以使用 v-model 指令进行双向绑定 -->
<!-- 错误用法:<h1 v-model="message"></h1> --> <!-- 表单元素 text 和 textarea 的双向绑定用法 -->
<input type="text" v-model="message">
<textarea cols="30" rows="10" v-model="message"></textarea> <!-- checkbox 的双向数据绑定的正确用法 -->
<input type="checkbox" v-model="seen"> <!-- 注意:checkbox 不能使用属性绑定的用法控制选中状态,如下错误用法示例 -->
<input type="checkbox" :checked="seen">
<!--
这样相当于给checkbox加上 checked 属性,而作为 html 元素的 checkbox
加了checked属性,无论是 true 还是 false 都是选中状态的。
-->
事件处理
- vue中定义事件处理函数
- DOM中绑定事件处理函数
■ 完整写法:v-on:事件名称=”事件处理函数”
■ 简写方式: @事件名称=”事件处理函数”
<div id="app">
<input type="text" v-model="number"><br/> <!-- vue中事件绑定需要用v-on:指令-->
<!-- 完整写法 -->
<button v-on:click="handleClick">事件绑定完整写法:点击number++</button><br/> <!-- 因为事件处理用的比较多,所以vue提供了@事件名称="处理函数"的简写方式 -->
<button @click="handleClick">事件绑定简写方式:点击number++</button>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el : '#app' ,
data : {
number : 1
},
methods : { // 事件处理函数定义在methods中,注意:methods中定义的方法名称不能和data中的数据名称相同
handleClick : function () {
console.log(this.number++);
}
}
});
</script>
效果:
vue安装介绍参考: 三种方式安装(vue-cli)
最新文章
- nginx和rewrite的配置
- SQL Server Bulk Insert批量数据导入
- 揭秘Sql2014新特性-tempdb性能提升
- Getting the first day in a week with T-SQL
- mvc cookie
- mybatis insertUseGeneratedKeys
- static_cast
- 自学HTML的几个例子
- HDU 5001 概率DP || 记忆化搜索
- IceMx.Mvc 我的js MVC 框架 三、动手来写一个评论模块儿
- mysql for windows(服务器)上的配置安装--实例
- 07_jquery入门第一天
- nyoj44 子串和 线性DP
- Asp.Net Core 轻松学-多线程之Task(补充)
- 面试常问的几个排序和查找算法,PHP实现
- ELK:logstash和filebeat6.0及以上版本的配置
- optional的使用
- Java并发编程-Semaphore
- sklearn-MultinomialNB朴素贝叶斯分类器
- 在Java Web项目中,不用ActionContext类来获得tomcat部署项目的绝对路径
热门文章
- springboot 简单自定义starter - beetl
- mysql CPU占用高
- Hibernate 批量保存数据
- 由Python的浅拷贝(shallow copy)和深拷贝(deep copy)引发的思考
- Spring+Junit+Mock测试web项目,即Controller
- JavaEE 7 新特性之WebSocket
- pat1055. The World&#39;s Richest (25)
- centos6安装bochs
- HDU 5465——Clarke and puzzle——————【树状数组BIT维护前缀和+Nim博弈】
- Unity C# 运用 GetSaveFileName() 导出Excel文件