el:element 需要获取的元素，一定是html中的跟容器元素。
data:用于数据的存储。
methods:用于存储各种方法。
data-binding:给属性绑定对应的值。v-bind:
v-on:绑定事件 [email protected]
<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/[email protected]/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