初识vue

时间：2019-10-16 18:16:36 阅读：112 评论：0 收藏：0 [点我收藏+]

标签：close yellow number 字符串 none 优先级 OLE sel asc

vue

　　渐进式JavaScript框架。主张最少，没有多做职责之外的事。

使用vue

1 const vm = new Vue({
2    el: ‘#app‘,//el--element 绑定使用vue语法的dom元素 
3    data: {    //vue的子对象data对象，用于存放页面的数据
4           a:5     
5         }
6 })

　　1.插值表达式{{ }}

　　　　可以插入一些表达式，网页中显示最终结果。也可以取出data中的数据，热更新。

{{ {a:1, b:10, c:5} }}

　　　　<p>{{ a }}<p>

　　　　vue数据同步更改，异步更新。可以使用内置对象$nextTick获取更新之后的数据

1 vm.$nextTick(function(){
2 //vm.$nextTick是在数据更新之后立即执行，可以获取更新之后的数据
3             console.log(vm.$el.innerHTML);
4         });

　　2.vue指令 v-bind v-on v-model　　　　

　　　　1.v-bind 绑定属性，因为 {{ }}插值表达式不能将data中数据取出作用于属性上

　　 v-bind: 可以简写为 :

　　绑定class 使用{className : bool}绑定或者data.pram绑定

　　绑定多个class的时候使用数组[]　　　　　

　　数据绑定的:calss和本来的class处于平行状态，互不干扰，先加载class,再加载:class

　　并且class优先级高于:class,因为class加载之后的排列是calss="calss :class"

　　绑定style 使用对象绑定，数组绑定多个,对象可以是在data中声明的

　　 2.v-on 绑定事件可以简写为@

　　　　 3.v-model

　　　　　　限制在<input>、<select>、<textarea>、components中使用，修饰符.lazy(取代 input 监听 change 事件)、.number(输入字符串转为有效的数字)、.trim(输入首尾空格过滤)。

　　　　　　它其实是一个语法糖

1 <select name="" id="" v-model="selected">
2                 <option value="" disabled>请选择</option>
3                 <option value="html">html</option>
4                 <option value="js">js</option>
5                 <option value="vue">vue</option>
6             </select>
7              {{ selected }}
8 当选择option ，selected值同步更新

　　3.控制元素显示与隐藏 v-if，v-show　　

　　　　v-show控制使用dom样式(display)控制元素的显示与隐藏

　　v-if通过移除，添加控制元素的显示与隐藏

　　频换的切换使用v-show

　　只判断一次使用v-if

 1 const vm = new Vue({
 2            el: ‘#app‘,
 3            data: {
 4                show: true,
 5                test: "隐藏",
 6                num: 0
 7            }
 8   })
 9 
10 <div id="app">
11 <div class="box red" v-if="show"></div>
12  <div class="box yellow" v-else></div>
13 <template v-if="show">
14       <!-- template不会加载到dom中 所以template中可以使用v-if 不可以使用v-show-->
15                 <div class="box red"></div>
16                 <div class="box yellow"></div>
17         </template>
18 <div class="box black" v-show="!show"></div>
19 </div>

　　4.v-for 遍历数组

<li v-for="fruit in fruits" key="fruit.id">{{ fruit.fruitName }}</li>

技术图片

　　5.侦听器，计算属性

　　　　watch 侦听器 computed 计算属性，vue内对象

 1 const vm = new Vue({
 2             el: ‘#app‘,
 3             data: {
 4                 // value:‘老王‘
 5                 name:‘老王‘,
 6                 age:‘21‘,
 7                 hobby:‘play‘,
 8                 // desc:‘姓名:老王，年龄:21‘
 9             },
10             watch:{
11                 name(){//监听name改变
12                     console.log(‘name‘);
13                     this.desc = `姓名:${this.name}，年龄:${this.age}`;
14                 },
15                 age(){//监听age改变
16                     console.log(‘age‘);
17                     this.desc = `姓名:${this.name}，年龄:${this.age}`;
18                 }
19             },
20             computed:{
21                 desc(){//name或者age改变都会执行此方法,在插值表达式直接使用desc
22                     console.log(‘desc‘);
23                     return `姓名:${this.name}，年龄:${this.age}`;
24                 }
25             }
26         })

View Code

　　6.组件

　　　　全局组件

 1 　　Vue.component(‘helloWorld‘, {
 2             data(){
 3                 return {
 4                     msg: ‘hello world‘    
 5                 };
 6             },
 7             template: `
 8                 <div>
 9                     <button @click="handleClick">点击</button>
10                     <span>{{ msg }}</span>
11                 </div>
12            `,
13            methods:{
14                handleClick (){
15                    this.msg = ‘haha‘;
16                }
17            }

　　　　在html中引用helloWorld即可

<hello-world></hello-world>
上面代码等于组件的template中的代码

<div>
 <button @click="handleClick">点击</button>
 <span>{{ msg }}</span>
 </div>

　　　　局部组件

 const vm = new Vue({
            el: ‘#app‘,
            data: {
            },
            components:{//局部组件
                hello:{
                    template: `
                    <div>
                        <span>hello</span>
                    </div>
                    `
                }
            }
        })

初识vue

标签：close yellow number 字符串 none 优先级 OLE sel asc

原文地址：https://www.cnblogs.com/seekknowledge/p/11686868.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行