- <!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 不会删除 DOM
v-cloak v-text v-bind v-on v-bind : v-on @
v-model : 表单元素
v-for v-if v-show // 事件修饰符 .stop .prevent .capture .self .once
v-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
结言
好了, 欢迎在留言区留言, 与大家分享你的经验和心得.
感谢你学习今天的内容, 如果你觉得这篇文章对你有帮助的话, 也欢迎把它分享给更多的朋友, 感谢.
来源: http://www.jianshu.com/p/70f623025bb3