Vue笔记
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{ 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