el:element 需要获取的元素，一定是html中的跟容器元素。
data:用于数据的存储。
methods:用于存储各种方法。
data-binding:给属性绑定对应的值。v-bind:
v-on:绑定事件 ===@
<button @click="add(1)">涨一岁</button> <button v-on:click="subtract(1)">减一岁</button>
修饰符
once:一次
<button @click.once="subtract(1)">减一岁,只能点一次。</button>
stop Movingt阻止冒泡事件
<span v-on:mousemove.stop="">Stop Movingt阻止冒泡事件方式2</span>
prevent阻止跳转
<a v-on:click.prevent="alert()" href="https://www.baidu.com">百度一下,.prevent阻止跳转</a><br>
02.index修饰符应用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="02.style.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<title>Vue.js</title>
</head>
<body>
<div id="vue-app">
<h1>Events</h1>
<p>My age is {{age}}</p>
<h3>v-on:绑定事件。 @click单击。dblclick双击。</h3>
<button @click="add(1)">涨一岁</button>
<button v-on:click="subtract(1)">减一岁</button>
<button @dblclick="add(10)">涨10岁</button>
<button v-on:dblclick="subtract(10)">减10岁</button>
<!-- 修饰符once 一次-->
<button @click.once="subtract(1)">减一岁,只能点一次。</button>
<hr>
<h3>获取鼠标移动的offsetXY的坐标。</h3>
<div id="canvas" v-on:mousemove="updateXY">
{{x}},{{y}} -
<!-- 方式1 -->
<!-- <span v-on:mousemove="stopMoving">Stop Movingt阻止冒泡事件方式1</span> -->
<!-- 方式2 修饰符应用 -->
<span v-on:mousemove.stop="">Stop Movingt阻止冒泡事件方式2</span>
</div>
<br>
<br>
<br>
<hr>
<h3>点击a标签不要打开新的窗口</h3>
<a href="https://www.baidu.com">百度一下</a>
<br>
<a v-on:click="alert()" href="https://www.baidu.com">百度一下,alert</a>
<br>
<a v-on:click.prevent="alert()" href="https://www.baidu.com">百度一下,.prevent阻止跳转</a><br>
<br>
</div>
</body>
<script src="02.app.js"></script>
</html>
02.app.js
new Vue({
el:"#vue-app",
data:{
age:30,
x:0,
y:0,
},
methods:{
add:function(n){
// this.age++;
this.age+=n;
},
subtract:function(n){
// this.age--;
this.age-=n;
},
updateXY:function(event){
// console.log(event);
//MouseEvent {isTrusted: true, screenX: 8, screenY: 170, clientX: 8, clientY: 79, …}
this.x = event.offsetX;
this.y = event.offsetY;
},
stopMoving:function(event){
//阻止冒泡事件
event.stopPropagation();
},
alert:function(){
alert("Hello World!");
}
},
});
02.style.css
#canvas{
width:600px;
padding:200px 20px;
text-align:center;
border:1px solid #333;
}
vue --help
vue list 查看
simple、webpack-simple、webpack模板
淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org
1、命令行工具 (CLI) 脚手架：生成项目的工具
# 全局安装 vue-cli
$ npm install --global vue-cli
初始化项目
vue init webpack-simple 01lesson
安装模板，不要安装sass
步骤：
cd 01lesson 当前目录
npm install vue.js整个项目的依赖
npm run dev 启动我们的项目
下载marked
npm install marked --save