传统开发模式 | 现代开发模式 |
---|---|
jQuery | vue/react |
80% 的精力放在表现层 | 20% 的精力放在表现层 |
前端渲染 | 后台渲染 |
---|---|
降低服务器负担、带宽压力小、用户体验好 | SEO、兼容、安全性 |
vue 的核心是数据
- {{}}
- <body>
- <div id="div1">
- {{name}}
- {{age}}
- </div>
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <script>
- let vm = new Vue({
- el: '#div1',
- data: {
- age: 18,
- name: 'zhangsan'
- }
- })
- </script>
- </body>
{{}}双括号里面的内容 vue 会到 data 里面去找. 但是缺点是页面加载延迟的时候会出现 {{name}} 的状态
./1.PHP
- <?PHP
- sleep(3)
- ?>
- sleep(3)
./index.html
- <body>
- <div id="div1">
- {{name}}
- {{age}}
- </div>
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <script>
- let vm = new Vue({
- el: '#div1',
- data: {
- age: 18,
- name: 'zhangsan'
- }
- })
- </script>
- </body>
扔到服务器去访问
三秒前
image.PNG
三秒后
image.PNG
- v-clock
- <style>
- *[v-clock] {display: none}
- </style>
指令
补充了 HTML 的属性
v-bind
v-bind: 绑定数据, 用于任何属性
- <div id="div1">
- <p v-bind:title="age">{{name}}</p>
- </div>
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <script>
- let vm = new Vue({
- el:'#div1',
- data: {
- age: 18,
- name: 'zhangsan'
- }
- })
- </script>
image.PNG
- v-bind:xxx
- :xxx(缩写)
- <p :title="age">{
- {
- name
- }
- }</p>
两个属性有另外的写法
- (1)class="aa bb"
- .aa {
- width: 200px;
- height: 200px
- }
- .bb {
- background-color: red
- }
- <div id="div1">
- <div :class="class_str">1</div>
- <hr>
- <div :class="class_arr">2</div>
- </div>
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <script>
- let vm = new Vue({
- el: '#div1',
- data: {
- class_str: 'aa bb',
- class_arr: ['aa', 'bb']
- }
- })
- </script>
image.PNG
- (2)style="width: 200px;backgound-color: red"
- <div id="div1">
- <p :style="style_str">{{content}}</p>
- <strong :style='style_json'>{{content}}</strong>
- </div>
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <script>
- let vm = new Vue({
- el: '#div1',
- data: {
- content: '我是中国人',
- style_str: 'color: red; fontSize: 40px',
- style_json: {color:'green',fontSize:'20px'}
- }
- })
- </script>
image.PNG
v-mode
双向绑定
- <div id='div1'>
- <input v-model="name" type='text'/>
- <p>{{name}}</p>
- </div>
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <script>
- let vm = new Vue({
- el: '#div1',
- data: {
- name: 'lwp'
- }
- })
image.PNG
你输入啥就立马显示啥
事件
- v-on:click=""||@click=""
- <body>
- <div id="div1">
- <input type="button" @click="fn()">
- </div>
- </body>
- <script>
- let vm = new Vue({
- el: '#div1',
- methods: {
- fn() {
- alert('1')
- }
- }
- });
- </script>
事件修饰符
事件冒泡
- <body>
- <div id="div1" @click="father()">
- <input type="button" @click="son()">
- </div>
- </body>
- <script>
- let vm = new Vue({
- el: '#div1',
- methods: {
- father() {
- alert('father')
- },
- son() {
- alert('son')
- }
- }
- });
- </script>
.stop 阻止事件冒泡
- <body>
- <div id="div1" @click="father()">
- <input type="button" @click.stop="son()">
- </div>
- </body>
- <script>
- let vm = new Vue({
- el: '#div1',
- methods: {
- father() {
- alert('father')
- },
- son() {
- alert('son')
- }
- }
- });
- </script>
修饰符 | 作用 |
---|---|
prevent | 阻止默认事件 |
stop | 阻止事件冒泡 |
native | 原生(配合组件使用) |
keycode|name | 按键 |
once | 只会一次操作,后面就失效了 |
self | 只认自己 |
capture | 捕获阶段的事件 |
key: 连着用, 多个按键同时按才触发
- .ctrl.enter
- computed
- <body>
- <div id="div1">
- {{num1}}+{{num2}}={{num3}}
- </div>
- </body>
- <script>
- let vm = new Vue({
- el: '#div1',
- data: {
- num1: 1,
- num2: 1,
- },
- computed: {
- num3() {
- return this.num1 + this.num2
- },
- }
- });
- </script>
这个功能用 methods 也能实现
但是 computed 有好处
1, 缓存 (跟 methods 每次计算不一样, 只有数据变才会重新计算)-> 性能高
2, 方便: 既能读又能写
既能读又能写
- <body>
- <div id="div1">
- <input type="text" v-model="familyName">
- <input type="text" v-model="givenName">
- <input type="text" v-model="name">
- </div>
- </body>
- <script>
- let vm = new Vue({
- el: '#div1',
- data: {
- familyName: '张',
- givenName: '三',
- },
- computed: {
- name: {
- get() {
- return this.familyName + this.givenName
- },
- set(value) {
- this.familyName = value[0];
- this.givenName = value.substring(1)
- }
- },
- }
- });
- </script>
image.PNG
既能从前到后
image.PNG
也能从后到前
image.PNG
高亮表示输入
监听
- <body>
- <div id="div1">
- <input type="text" v-model="name">
- </div>
- </body>
- <script>
- let vm = new Vue({
- el: '#div1',
- data: {
- name: 'lwp'
- },
- watch: {
- name() {
- console.log('name change')
- }
- }
- });
- </script>
来源: http://www.jianshu.com/p/17fb83bc466e