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 学习内容: ...
随机推荐
- Java基础——GUI编程（一）
一.定义 GUI全称是Graphical User Interface,即图形用户界面.JDK中提供了AWT 和 Swing 两个包,用于GUI程序的设计和开发. 1.java .awt abstr ...
- Shiro眼皮下玩ajax，玩出302 Found
2017/06/14这一天,是我玩Shiro安全框架最刻骨铭心的一天.因为Shiro今天给我深深的补了一刀,在这儿我也给各位补一刀吧,其实问题很简单,解决方式也极其简单,只是给各位分享一下这个错误,纯 ...
- A simple problem（hdu2522）
A simple problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- JS中文档碎片的理解和使用
1.我们要明白当js操作dom时发生了什么? 每次对dom的操作都会触发"重排"(重新渲染界面,发生重绘或回流),这严重影响到能耗,一般通常采取的做法是尽可能的减少 dom操作来减 ...
- JS中判断数据类型的几种方法
1⃣️首先我们来了解一下js中的数据类型 1.基本数据类型:Undefined.Null.Boolean.Number.String(值类型) 2.复杂数据类型:Object(引用类型) (值类型和引 ...
- 关于flex布局兼容
(做个记录) 一.W3C各个版本的flex 2009 version 标志:display: box; or a property that is box-{*} (eg. box-pack) 201 ...
- MySql 简单统计查询消耗时间脚本
MySql 简单统计查询消耗时间脚本 by:授客 QQ:1033553122 drop procedure if exists selectTime; delimiter; create proced ...
- ES6 箭头函数下的this指向
在javscript中,this 是在函数运行时自动生成的一个内部指针,它指向函数的调用者. 箭头函数有些不同,它的this是继承而来, 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象. ...
- mysql如何修改开启允许远程连接
关于mysql远程连接的问题,大家在公司工作中,经常会遇到mysql数据库存储于某个人的电脑上,大家要想连接mysql服务,装有mysql服务的电脑就必须开启远程连接 第一步,用dos连接上你的数据库 ...
- Linux Ubuntu16.04LTS安装TensorFlow（CPU-only,python3.7）——使用Anaconda安装
1.安装Anaconda(在此不再赘述) 2.用Conda安装TensorFlow 1)建立TensorFlow运行环境并激活 conda create -n tensorflow pip pytho ...