Vue入门1
欢迎转载，转载请注明出处。
前言
学习本系列Vue知识，需要结合本系列的一些demo。你可以查看我的 Github 或者直接下载 ZIP包 。
建议学习本系列之前已经会一个其他的前端框架，了解计算属性，数据绑定，模板语言等。零基础的话，看本教程可能不太适合。
一、第一个demo，Hello Word
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!-- 通过双大括号进行数据绑定 -->
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue'
}
});
</script>
</body>
</html>
很简单，el指定Vue实例挂载的元素节点。data里面指定要显示的message的初值。当然，运行是依赖vue.js的，所以要加载script脚本。
二、v-bind指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-bind: 将元素的属性跟Vue实例的属性绑定在一起。
将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。
-->
<div id="app">
<!-- 当然也可以缩写成<span :title="message"> -->
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div>
<script>
var app = new Vue({
el : '#app',
data : {
message : 'You loaded this page on ' + new Date()
}
});
</script>
</body>
</html>
v-bind: 将元素的属性跟Vue实例的属性绑定在一起。
三、v-if v-else指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-if: 控制元素是否显示。
v-else 元素必须紧跟在 v-if 或 v-show 元素的后面——否则它不能被识别。
-->
<div id="app">
<p v-if="seen">Now you see me</p>
<p v-else>seen is false</p>
</div>
<script>
var app = new Vue({
el : '#app',
data : {
seen : false
}
});
</script>
</body>
</html>
四、v-for指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-for: 循环Vue实例的某些数据。用 in
-->
<div id="app">
<ol>
<li v-for="todo in todos">{{todo.text}}</li>
</ol>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' }
]
}
});
</script>
</body>
</html>
五、v-on指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-on: 绑定一个监听事件，用于调用我们 Vue 实例中定义的方法
方法定义在methods属性里面.
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
-->
<div id="app">
<p>{{message}}</p>
<!-- 当然也可以缩写成<button @click="changeMessage"> -->
<button v-on:click="changeMessage">Change Message</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js !'
},
methods: {
changeMessage: function(){
this.message = 'message be changed !'
}
}
});
</script>
</body>
</html>
六、v-model指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demos</title>
<script src="../vue.js"></script>
</head>
<body>
<!--
v-model: 可以直接将表单输入的某个值跟Vue实例的属性绑定
-->
<div id="app">
<p>{{message}}</p>
<input v-model="message"></input>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js !'
}
});
</script>
</body>
</html>
Vue入门1的更多相关文章
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- VUE 入门笔记
前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...
- Vue 入门指南 JS
Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- parcel+vue入门
一.parcel简单使用 npm install -D parcel-bundler npm init -y (-y表示yes,跳过项目初始化提问阶段,直接生成package.json 文件.) Pa ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- 学习Vue 入门到实战——学习笔记
闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...
随机推荐
- 浅谈Http协议是怎么回事?
老实说关于http协议这个概念,见到最多的还是各类招聘信息.在平时的工作中,除了了解一些请求,响应,请求头这些概念外,对于http协议也没有太多的关心.因为貌似对平时的工作没有什么影响,所以在写这篇关 ...
- Mybatis之SessionFactory原理
Mybatis在使用前需进行初始化,下面就针对Mybatis的初始化过程进行介绍.Mybatis的初始化过程有两种:基于XML和基于Java API两种方式,下面就针对基于XML的方式进行展开. 一. ...
- systemd管理服务
[root@zbs-staging-api system]# cat /lib/systemd/system/ncmulti@.service [Unit] Description=many on % ...
- hibernate动态表名映射
引自:http://blog.csdn.net/xvshu/article/details/39187779 最近的一个项目有一个需求,有N个考核单位,要对每个考核单位生成一张考核情况表,这样做的目的 ...
- ionic1 项目微信支付
使用的插件参照地址:https://github.com/xu-li/cordova-plugin-wechat:(这里包含微信登录,微信分享和微信支付) 插件安装 cordova plugin ad ...
- IDEA项目搭建四——使用Mybatis实现Dao层
一.引入mybatis及mysql的jar包 可以从阿里云上面查找版本,db操作放在dao层所以打开该层的pom.xml文件,找到<dependencies>节点增加两个引入 <de ...
- 配置ArcGIS Server使用Windows AD Windows集成身份认证
1.配置 ArcGIS Server 以使用 Windows Active Directory 用户和角色. 2.填写Windows域账号凭证,对账号的要求如下: 需要能读取域中的用户和组,一般从属于 ...
- CSS 小结笔记之变形、过渡与动画
1.过渡 transition 过渡属性用法: transition :ransition-property transition-duration transition-timing-func ...
- apache web服务器安全配置
尽管现在购买的云服务器很多都有一键web环境安装包,但是如果是自己配置web环境则需要对各种安全配置十分了解,今天我们就来尝试这做好web服务器安全配置.这里的配置不尽完善,若有纰漏之处还望指出. 修 ...
- Oracle EBS 贷项通知单核销
SELECT cm.trx_number ,fnd_flex_ext.get_segs('SQLGL', 'GL#', gcc.chart_of_accounts_id, ad.code_combin ...