vue入门——基本概念

1. 挂载点,模板,实例的关系?

首先附上一个基本demo:

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>vue 入门title>
 6     <script src="./vue.js">script>
 7 head>
 8 <body>
 9     <div id="root">
10         
11     div>
12     <script>
13         new Vue({
14             el: "#root",
15             template: '

{{msg}}

', 16 data: { 17 msg: "HEllo Vue " 18 } 19 }) 20 script> 21 body> 22 html>

解释:

挂载点:就是el 所代表的id为root的div,指明vue只对这个div起作用

模板:div里面的内容

实例:在vue实例中指定了挂载点,模板,vue会自动结合模板和数据生成最后的内容,然后把内容放在挂载点之中

 

2. 计算属性和侦听器(computed 与watch)

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>vue 入门title>
 6     <script src="./vue.js">script>
 7 head>
 8 <body>
 9     <div id="root">
10         姓:<input  v-model="firstName">
11         名:<input v-model="lastName">
12         <div>全名:{{fullName}}div>
13         <div>计数:{{count}}div>
14     div>
15     <script>
16         new Vue({
17             el: "#root",
18             data: {
19              firstName: ' ',
20              lastName: ' ',
21              count: 0
22             },
23             computed:{
24                 fullName: function(){
25                     return this.firstName  ' '  this.lastName  
26                 }
27             },
28             watch:{
29                 fullName: function(){
30                     this.count  
31                 }
32 }
33         })
34     script>
35 body>
36 html>

 3. v-show 和 v-if  的区别:

附上代码显示隐藏的例子

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>vue 入门title>
 6     <script src="./vue.js">script>
 7 head>
 8 <body> 
 9     <div id="root">
10         <div v-if="show">hello vuediv>
11         
12         <button v-on:click="handle">togglebutton>
13     div>
14     <script>
15         new Vue({
16             el: "#root",
17             data:{
18                 show: true
19             },
20             methods:{
21                 handle: function(){
22                     this.show = !this.show;
23                 }
24             }
25 
26         })
27     script>
28 body>
29 html>

解释:运行以上代码,查看控制台后发现:

  v-if 是直接从整个dom元素中删除该节点(每次触发需要重新创建dom或销毁dom),

  而v-show是通过display:none来实现节点的隐藏,

  需要频繁的操作时使用v-show 效率更高,如果只需操作一次使用v-if 

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

你可能感兴趣的:(前端,vue)