Web前端-Vue.js必备框架（一）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue js</title></head><body><div id="app"> <h1>{{ message }}</h1> <input type="text" v-model="message"> <pre> ?{{ $data | json }} </pre></div><script src="vue.min.js"></script><script>new Vue({ el: "#app", data: { ?message: "Hello World!" }});</script></body></html><!DOCTYPE html> <html lang="en"> <head> ?<meta charset="UTF-8"> ?<title>Vue js</title> </head><body><div id="app"> <form> ?<div class="error" v-show="!message">dashucoding</div> ?<textarea v-model="message"></textarea> ?<button v-show="message">Send</button> </form> ?<pre>{{ $data | json }}</pre></div><script src="vue.min.js"></script><script> new Vue({ ?el: '#app', ?data:{ ??message: '' ?} });</script></body></html>
v-show和v-if使用第一个整体元素还存在，使用第二个整体都不存在了。
<head> <meta charset="UTF-8"> <title>Vue.js</title> <link rel = "stylesheet" href="main.css"></head><body><div id = "app"> <form action="demo.html" v-on:submit="submitForm"> ?<button type="submit">Submit</button> </form></div><script src="vue.min.js"></script><script>new Vue({ el: '#app', methods: { ?submitForm: function(e){ ??alert("dashucoding"); ??//e.preventDefault(); ?} ?}})</script></body></html>组件化
<body><div id="app"> <count></count></div><template id="da"></template><script src="vue.min.js"></script><script> Vue.component("counter", { ??template: '<h1>dashu</h1>' });new Vue({ el: '#app', data: { ?count: 0 },})</script></body>什么是Vue.js？是目前最火的框架，React是最流行的框架，打包工具Webpack，目前三大主流Vue.js，Angular.js，React.js框架。
Vue.js构建用户界面框架，注重视图层。
React开发网站，开发手机APP
Vue可以用于开发APP，需要Weex
MVC 是 后端开发的概念
MVVM，视图层分离
Model, View, VM ViewModel
MVVM的案例：
v-cloak[v-clock]{ display: none;}<p v-cloak></p>v-text v-html v-bind: v-on事件修饰符
v-on.stop 阻止冒泡.prevent 阻止默认事件.capture 使用事件捕获模式.self 只当事件在该元素本身触发时回调.once 事件只触发一次<body> <div id = "app"> ?<div> ??<input type="button" value="戳他"> ?<div> </div> <script> ?var vm = new Vue({ ???el: '#app', ???data: {}, ???methods: {} ??}); </script></body>实例：Vue.js只关注视图层
<div id = "app"> <p> {{ message }} </p></div>下载地址：https://vuejs.org/js/vue.min.js
<div id="app"> ?{{ message }}</div>var app = new Vue({ ?el: '#app', ?data: { ???message: 'Hello Vue!' ?}})<div id="app"> ?<span v-bind:title="message"> ???鼠标悬停 ?</span</div>var app = new Vue({ ?el: '#app', ?data: { ???message: 'Hello Vue!' ?}})<div id="app"> ?<p v-if="seen">看到我了</p></div>var app = new Vue({ ?el: '#app', ?data: { ???seen: true ?}})条件循环
<div id="app"> ?<ol> ???<li v-for="do in dos"> ?????{{ do.text }} ???</li> ?</ol></div>var app = new Vue({ ?el: '#app', ?data: { ???dos: [ ?????{ text: 'JavaScript' }, ?????{ text: 'Vue' }, ?????{ text: '项目' } ???] ?}})// v-on 添加一个事件监听器<div id="app"> ?<p>{{ message }}</p> ?<button v-on:click="Message">消息</button></div>var app = new Vue({ ?el: '#app', ?data: { ???message: 'Hello Vue.js' ?}, ?methods: { ???Message: function () { ?????this.message = this.message.split('').reverse().join('') ???} ?}})<div id="app"> ?<p>{{ message }}</p> ?<input v-model="message"></div>var app = new Vue({ ?el: '#app', ?data: { ???message: 'Hello Vue!' ?}})组件
Vue.component('do-item', { ?template: '<li>dashucoding</li>'})<do-item></do-item><div id="app"> <ol> <do-item ?????v-for="item in List" ?????v-bind:todo="item" ?????v-bind:key="item.id" ???></do-item> ?</ol></div>var app = new Vue({ ?el: '#app', ?data: { ???List: [ ?????{ id: 0, text: '1' }, ?????{ id: 1, text: '2' }, ?????{ id: 2, text: '吃的东西' } ???] ?}})计算器：
<div id="app"> <input type = "text" v-model = "n1"> <select v-model="opt"> ??<option value="0"> + </option> ??<option value="1"> - </option> ??<option value="2"> × </option> ??<option value="3"> ÷ </option> </select> ?<input type="text" v-model="n2"> ?<input type="button" value="=" v-on:click="getResult"> ?<input type="text" v-model="result"></div>添加class类样式
<h1 :class="[ 'red', 'yellow' ]" > </h1><h1 :class=" [ 'red', 'than', isactive? 'active' : '' ]"><h1 :class="[ 'red', 'than', {'active' : isactive}]"></h1>
style
<h1 :style="{color: 'red', 'font-size' : '20px'}"></h1>v-for
<div id ="app"> //<p>{{list[0]}}</p> <p v-for="item in list"> {{item}} </p> <p v-for="(item,i) in list"> {{item}} </p></div><p v-for="count in 10">{{count}}</p>v-if 不断创建和删除，不利于重复使用渲染v-show 不会删除DOMv-cloak v-text v-bind v-onv-bind :v-on @v-model : 表单元素v-forv-ifv-show// 事件修饰符.stop .prevent.capture.self.oncev-for 使用key属性 string/number创建一个Vue
var vm = new Vue({})var data={a:1};var vm = new Vue({ data: data})vm.a == data.a // true生命周期图示
数据绑定
<span> {{msg}} </span>v-once执行一次<span v-once> {{msg}} </span><!-- 完整语法 --><a v-bind:href="url">...</a><!-- 缩写 --><a :href="url">...</a><!-- 完整语法 --><a v-on:click="1">...</a><!-- 缩写 --><a @click="1">...</a>| 目录 | 说明 |
|---|---|
build | 项目构建 |
config | 配置目录 |
mode_modules | npm加载的项目依赖模块 |
src | 开发的目录 |
static | 静态资源目录 |
test | 初始测试目录 |
index.html | 入口文件 |
package.json | 项目配置文件 |
实例：
<div id="vue_"> ???<h1>{{site}}</h1> ???<h1>{{url}}</h1> ???<h1>{{det()}}</h1></div><script type="text/javascript"> ???var vm = new Vue({ ???????el: '#vue_', ???????data: { ???????????site: "123", ???????????url: ".com" ???????}, ???????methods: { ???????????det: function() { ???????????????return ?this.site; ???????????} ???????} ???})</script>v-html="message"v-bind:class="{'class1': use}"v-bind:id="id"<script>new Vue({ ?el: '#app', ?data: { ???id : 1 ?}})</script>v-if="seen"<pre><a v-bind:href="url">123</a></pre><script>new Vue({ ?el: '#app', ?data: { ???url: '123456' ?}})</script><div id="app"> ???<p>{{ message }}</p> ???<input v-model="message"></div> ???<script>new Vue({ ?el: '#app', ?data: { ???message: '123456!' ?}})</script>v-if v-else v-else-if<div id="app"> ?<ul> ???<li v-for="n in 10"> ????{{ n }} ???</li> ?</ul></div> <div id="app"> ?{{ message.split('').reverse().join('') }}</div>
Vue代码
<body> ?<div id="app"> ???<p>{{ msg }}</p> ?</div> ?<script> ???// ?vm 对象就是 MVVM中的 VM调度者 ???var vm = new Vue({ ?????el: '#app', ?// 表示当前要控制页面上的哪个区域 ?????// ?data 就是 MVVM中的 M ?????data: { ????????msg: '欢迎' ??????} ???}) ?</script></body>
v-cloak,v-bind:,v-on:学习
<body> ?<div id="app"> ???<!-- ?v-cloak 解决 插值表达式闪烁的问题 --> ???<p v-cloak> {{ msg }} </p> ???<h4 v-text="msg">1</h4> ???<!-- ?v-text 没有闪烁问题 --> ???<!-- v-text会覆盖元素中原本的内容，插值表达式不会把整个元素的内容清空 --> ???<div>{{msg2}}</div> ???<div v-text="msg2"></div> ???<div v-html="msg2">111</div> ???<!-- v-bind: 提供绑定属性的指令 --> ???<!-- <input type="button" value="按钮" v-bind:title="my"> --> ???<!-- v-on: 事件绑定机制 --> ???<!-- <input type="button" value="按钮" :title="my" v-on:click="alert('hello')"> --> ???<input type="button" value="按钮" @click="show"> ?</div> ?<script src="./lib/vue-2.4.0.js"></script> ?<script> ???var vm = new Vue({ ?????el: '#app', ?????data: { ???????msg: '123', ???????msg2: '<h1>1111</h1>', ???????my: '11111' ?????}, ?????methods: { ????????show: function () { ?????????alert('Hello') ???????} ?????} ???}) ?</script></body>倒序效果
<body> ?<!-- 2. 创建一个要控制的区域 --> ?<div id="app"> ???<input type="button" value="1" @click="lang"> ???<input type="button" value="2" @click="stop"> ???<h4>{{ msg }}</h4> ?</div> ?<script> ???var vm = new Vue({ ?????el: '#app', ?????data: { ???????msg: 'dashu', ???????intervalId: null ?????}, ?????methods: { ???????lang() { ?????????if (this.intervalId != null) return; ?????????this.intervalId = setInterval(() => { ???????????var start = this.msg.substring(0, 1) ???????????var end = this.msg.substring(1) ???????????this.msg = end + start ?????????}, 600) ???????}, ???????stop() { ??????????clearInterval(this.intervalId) ?????????this.intervalId = null; ???????} ?????} ???}) ?</script></body>事件修饰符
.stop 阻止冒泡.prevent 阻止默认行为.capture 实现捕获事件的机制.self 实现只点击当前元素，才会触发事件.once 只触发一次事件
v-model指令
<!DOCTYPE html><html lang="en"><head> ?<meta charset="UTF-8"> ?<meta name="viewport" content="width=device-width, initial-scale=1.0"> ?<meta http-equiv="X-UA-Compatible" content="ie=edge"> ?<title>dashu</title> ?<script src="./lib/vue-2.4.0.js"></script></head><body> ?<div id="app"> ???<h4>{{ msg }}</h4> ???<input type="text" style="width:100%;" v-model="msg"> ?</div> ?<script> ???var vm = new Vue({ ?????el: '#app', ?????data: { ???????msg: '123' ?????}, ?????methods: { ?????} ???}); ?</script></body></html>计算器
var Str = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'this.result = eval(Str)<!DOCTYPE html><html lang="en"><head> ?<meta charset="UTF-8"> ?<meta name="viewport" content="width=device-width, initial-scale=1.0"> ?<meta http-equiv="X-UA-Compatible" content="ie=edge"> ?<title>dashu</title> ?<script src="./lib/vue-2.4.0.js"></script></head><body> ?<div id="app"> ???<input type="text" v-model="n1"> ???<select v-model="opt"> ?????<option value="+">+</option> ?????<option value="-">-</option> ?????<option value="*">*</option> ?????<option value="/">/</option> ???</select> ???<input type="text" v-model="n2"> ???<input type="button" value="=" @click="calc"> ???<input type="text" v-model="result"> ?</div> ?<script> ???var vm = new Vue({ ?????el: '#app', ?????data: { ???????n1: 0, ???????n2: 0, ???????result: 0, ???????opt: '+' ?????}, ?????methods: { ???????calc() { ??????????switch (this.opt) { ???????????case '+': ?????????????this.result = parseInt(this.n1) + parseInt(this.n2) ?????????????break; ???????????case '-': ?????????????this.result = parseInt(this.n1) - parseInt(this.n2) ?????????????break; ???????????case '*': ?????????????this.result = parseInt(this.n1) * parseInt(this.n2) ?????????????break; ???????????case '/': ?????????????this.result = parseInt(this.n1) / parseInt(this.n2) ?????????????break; ?????????} ????????} ?????} ???}); ?</script></body></html>
vue样式
<h1 class="red"></h1><h1 :class=" [ 'red', 'green' ] "></h1> 绑定数组<h1 :class=" [ 'red', 'green', flag?'active':'' ] "></h1> 三元表达式<h1 :class="classObj">123</h1> ?<script> ???var vm = new Vue({ ?????el: '#app', ?????data: { ???????flag: true, ???????classObj: { red: true, green: true, active: false } ?????}, ?????methods: {} ???}); ?</script>样式：<!DOCTYPE html><html lang="en"><head> ?<meta charset="UTF-8"> ?<meta name="viewport" content="width=device-width, initial-scale=1.0"> ?<meta http-equiv="X-UA-Compatible" content="ie=edge"> ?<title>dashu</title> ?<script src="./lib/vue-2.4.0.js"></script></head><body> ?<div id="app"> ???<!-- <h1 :style="ss">12</h1> --> ???<h1 :style="[ ss, ee ]">123</h1> ?</div> ?<script> ???var vm = new Vue({ ?????el: '#app', ?????data: { ???????ss: { color: 'red', 'font-weight': 200 }, ???????ee: { color: 'red' } ?????}, ?????methods: {} ???}); ?</script></body></html>
for循环
// 数组对象<!DOCTYPE html><html lang="en"><head> ?<meta charset="UTF-8"> ?<meta name="viewport" content="width=device-width, initial-scale=1.0"> ?<meta http-equiv="X-UA-Compatible" content="ie=edge"> ?<title>dashu</title> ?<script src="./lib/vue-2.4.0.js"></script></head><body> ?<div id="app"> ???<p v-for="(item, i) in list">{{ item.id }} - {{ item.name }} - {{i}}</p> ?</div> ?<script> ???var vm = new Vue({ ?????el: '#app', ?????data: { ???????list: [ ?????????{ id: 1, name: 'd' }, ?????????{ id: 2, name: 'dd' }, ?????????{ id: 3, name: 'ddd' }, ?????????{ id: 4, name: 'dddd' } ???????] ?????}, ?????methods: {} ???}); ?</script></body></html><!DOCTYPE html><html lang="en"><head> ?<meta charset="UTF-8"> ?<meta name="viewport" content="width=device-width, initial-scale=1.0"> ?<meta http-equiv="X-UA-Compatible" content="ie=edge"> ?<title>dashu</title> ?<script src="./lib/vue-2.4.0.js"></script></head><body> ?<div id="app"> ???<p v-for="(item, i) in list">{{i}} - {{item}}</p> ?</div> ?<script> ???var vm = new Vue({ ?????el: '#app', ?????data: { ???????list: [1, 2, 3, 4 ] ?????}, ?????methods: {} ???}); ?</script></body></html>// 循环对象<!DOCTYPE html><html lang="en"><head> ?<meta charset="UTF-8"> ?<meta name="viewport" content="width=device-width, initial-scale=1.0"> ?<meta http-equiv="X-UA-Compatible" content="ie=edge"> ?<title>dashu</title> ?<script src="./lib/vue-2.4.0.js"></script></head><body> ?<div id="app"> ???<p v-for="(val, key, i) in user">{{ val }} -- {{key}} -- {{i}}</p> ?</div> ?<script> ???var vm = new Vue({ ?????el: '#app', ?????data: { ???????user: { ?????????id: 1, ?????????name: 'da', ?????????gender: '男' ???????} ?????}, ?????methods: {} ???}); ?</script></body></html>// 迭代数字<!DOCTYPE html><html lang="en"><head> ?<meta charset="UTF-8"> ?<meta name="viewport" content="width=device-width, initial-scale=1.0"> ?<meta http-equiv="X-UA-Compatible" content="ie=edge"> ?<title>dashu</title> ?<script src="./lib/vue-2.4.0.js"></script></head><body> ?<div id="app"> ???<p v-for="count in 6"> {{ count }} </p> ?</div> ?<script> ???var vm = new Vue({ ?????el: '#app', ?????data: {}, ?????methods: {} ???}); ?</script></body></html>
key属性使用
<p v-for="item in list" :key="item.id"> <input type="checkbox">{{item.id}} --- {{item.name}}</p>add() { ?this.list.unshift({ id: this.id, name: this.name })}v-if 每次都会重新删除和创建元素，性能消耗高v-show 每次不会重新创建，初始渲染消耗高
vue 中绑定样式两种方法：
v-bind: class ????v-bind:style结言
好了，欢迎在留言区留言，与大家分享你的经验和心得。
感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。
作者简介
达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。
Web前端-Vue.js必备框架（一）
原文地址：https://www.cnblogs.com/dashucoding/p/10448571.html