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 标签字符串如何展示在页面中

#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