1. Hello Vue
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <!-- 引入Vue 通过BootCDN引入 --> <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script> </head> <body> <!-- 定义一个div 设置id class都可以 --> <div id="app"> <!-- 直接可以引用data对象里面的属性 --> {{text}} </div> <script> // 创建Vue实例 var myVue = new Vue({ // el 代表选择一个元素 值是选择器 是id就用#开头 class就.开头 el: '#app', // data 定义数据 data: { text: 'Hello Vue' } }) </script> </body> </html>
2. 一个问题
如果Vue.js放在最后面就现加载html, 结果就能看到{{text}}, 解决办法有两个
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <!-- 引入Vue 通过BootCDN引入 --> <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script> <style> /* CSS里面用属性选择器, 选择之后把他隐藏, 这是Vue提供的 */ [v-cloak] { display: none; } </style> </head> <body> <div id="app"> <!-- 第一种设置属性然后通过css隐藏 --> <span v-cloak>{{text}}</span><br> <!-- 第二种用 v-text --> <p v-text="text">如果有文本内容会被覆盖掉</p> </div> <script> var myVue = new Vue({ el: '#app', data: { text: 'Hello Vue' } }) </script> </body> </html>
3. v-html
就和innerHTML的效果一样
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <!-- 引入Vue 通过BootCDN引入 --> <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script> </head> <body> <div id="app"> <p v-html="text">如果有文本内容会被覆盖掉</p> </div> <script> var myVue = new Vue({ el: '#app', data: { text: '<h1>你好Vue</h1>' } }) </script> </body> </html>
4. 设置自定义属性和简写形式
效果和setAttribute一样可以在审查元素的时候看到属性
<div id="app"> <!-- v:bind: 这种写法是基本写法 直接冒号开头是简写 --> <!-- "" 双引号可以是表达式, 可以是data里面的属性 --> <p v-bind:title="text" :text="text" :compute="1+1" v-text="text" > {{text}} </p> </div> <script> var myVue = new Vue({ el: '#app', data: { text: '你好Vue' } }) </script>
5. 条件判断
<div id="app"> <ul> <li v-if="num > 3">大于</li> <li v-else-if="num < 3">小于</li> <li v-else>等于</li> </ul> </div> <script> var myVue = new Vue({ el: '#app', data: { num: 2 } }) </script>
6. 模板语法
<div id="app"> <ul> <li> {{ num > 1 ? true : false }} <!-- 支持Math和Date --> {{ new Date() }} </li> </ul> </div> <script> var myVue = new Vue({ el: '#app', data: { num: 2 } }) </script>
7. 事件处理
<div id="app"> <!-- 简写用@开头, click, 依次类推其他事件 --> <!-- v-on:click 原来的 --> {{num}} <button @click="setVal">点我啊</button> </div> <script> var myVue = new Vue({ el: '#app', data: { num: 2 }, methods: { setVal: function() { this.num++; } }, }) </script>
8. 循环
<div id="app"> <!-- 语法 in 和 of v-for="value, index in obj" v-for="value, attr, index of list" --> <ul> <!-- 最好绑定一个key 从而重用和重新排序现有元素 --> <li v-for="item in nums" :key="item.id" > {{item.text}} <a href="">{{item.label}}</a> </li> </ul> <!-- @click 直接绑定一个方法 --> <button @click="setVal">点我啊</button> </div> <script> var myVue = new Vue({ el: '#app', data: { nums: '' }, // methods定义方法的对象, 里面定义着方法等待被使用 methods: { setVal: function() { this.nums = [ {id: 1, text: 'Hello world', label:'JavaScript'}, {id: 2, text: 'echo 1;', label:'PHP'}, {id: 3, text: '<html></html>', label:'HTML'}, ] return this.nums } }, }) </script>
9. 表单处理
<div id="app"> <!-- 表单用 v-model="属性" --> <!-- 普通文本框直接操作字符串 --> <h3>text和textarea</h3> <p><input type="text" v-model="inputText"></p> <p><textarea name="" v-model="inputText" id="" cols="30" rows="10"></textarea></p> <p>{{inputText}}</p> <!-- 单选框获取的是value --> <h3>radio单选框</h3> <p><input type="radio" name="1" value="男" v-model="radio" id="">男</p> <p><input type="radio" name="1" value="女" v-model="radio" id="">女</p> <p>{{radio}}</p> <!-- 多个复选框用数组 --> <h3>多选框</h3> <p> <input type="checkbox" name="1" value="true" v-model="chkName" id=""> <input type="checkbox" name="2" value="false" v-model="chkName" id=""> <input type="checkbox" name="3" value="obj" v-model="chkName" id=""> </p> <!-- chkName是一个数组选择一个自动添加到数组里面 --> <p>{{chkName}}</p> <p> <!-- 多选择也是数组 --> <h3>多选择</h3> <select name="" id="" v-model="chkName" multiple> <option value="请选择" disabled selected>请选择</option> <option value="666">6666</option> <option value="222">6666</option> <option value="663336">6666</option> <option value="66446">6666</option> </select> </p> <p>{{chkName}}</p> <!-- 渲染多个 --> <p> <select name="" v-model="chkName"> <!-- :value 要用冒号开头才可以使用val.value 不让它直接渲染val.value这个字符串 --> <!-- :value 可以绑定一个对象, 到时候获取的时候就是一个对象 --> <option :value="{ number: 123 }">123</option> <option :value="val.value" :key="val.id" v-for="val in optionVal"> {{ val.text }} </option> </select> </p> <p>{{chkName}}</p> <p> <!-- 输入完成后去除收尾空格 --> <input v-model.lazy.trim="msg" type="text"> {{noSpace}} </p> </div>
10. class和style
<style> .active { color: #0f0; } .text-danger { color: #f00; } .static { font-size: 20px; } </style> <div id="app"> <!-- style设置 --> <p :style="{fontSize: 24 + 'px' }">24</p> <!-- class设置 --> <!-- class存在与否取决于一个布尔值isActive --> <!-- 可以用原来的class 也可以用:class这个更高级 --> <p class="static" :class="className">6666</p> <p :class="classList">11111111111111</p> <button @click="setClass">点我啊</button> </div> <script> var vm = new Vue({ el: '#app', data: { className: { active: true, 'text-danger': false }, classList: [{ active: true }, { 'text-danger': false }] }, methods: { setClass() { this.className.active = !this.className.active; this.className['text-danger'] = !this.className['text-danger']; } }, }) </script>
11. 组件基础
<div id="app"> <item></item> </div> <script> Vue.component('item', { data: function() { return { count: 0 } }, template: ` <button @click="count += 1">{{count}}</button> ` }) var myVue = new Vue({ el: '#app', data: { nums: '' } }) </script>