Vue笔记
尤雨溪是Vue.js框架的作者，HTML5版Clear的打造人。他认为，未来App的趋势是轻量化和细化，能解决问题的应用就是好应用。而在移动互联网时代大的背景下，个人开发者的机遇在门槛低，成本低，跨设备和多平台四个方面。
大帅哥！！！！
变量{{}}
<p>name:{{ name }}</p>
<p>job:{{ job }}</p>
方法调用传值
<h2>{{ greet("世界") }}</h2>
v-bind:属性绑定.不需要加{{}}
<a v-bind:href="website">百度一下</a>
<input type="text" v-bind:value="name">
v-html 标签字符串如何展示在页面中
<p v-html="websiteTag"></p>
#websiteTag:"<a href='https://www.baidu.com'>百度一下2</a>"
01.index属性绑定.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="01.style.css">
<script_top src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script_top>
</head>
<body>
<!-- vue-app 是跟容器元素-->
<div id="vue-app">
<h3>方法调用传值</h3>
<h2>{{ greet("世界") }}</h2>
<hr>
<h3>变量{{}}</h3>
<p>name:{{ name }}</p>
<p>job:{{ job }}</p>
<hr>
<h3>v-bind:属性绑定.不需要加{{}}</h3>
<a v-bind:href="website">百度一下</a>
<input type="text" v-bind:value="name">
<hr>
<h3>标签字符串如何展示在页面中</h3>
{{websiteTag}}
<p v-html="websiteTag"></p>
</div>
</body>
<script_top src="01.app.js"></script_top>
</html>
01.app.js
//实例化vue对象
new Vue({
el:"#vue-app",
data:{
name:"贝贝",
job:"摄影师",
website:"https://www.baidu.com",
websiteTag:"<a href='https://www.baidu.com'>百度一下2</a>"
},
methods:{
greet:function(time){
return time+"你好!"+this.name;
}
}
});
/*
el:element 需要获取的元素，一定是html中的跟容器元素。
data:用于数据的存储。
methods:用于存储各种方法。
data-binding:给属性绑定对应的值。v-bind:
*/
01.style.css
h3{
color:green;
}
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>
02.index修饰符应用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="02.style.css">
<script_top src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script_top>
<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_top src="02.app.js"></script_top>
</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{
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