从零开始学习vue(2)

其他 2019-11-06 19:50:50 阅读次数: 0

一.vue实例

每个vue应用都是通过Vue构造函数创建的一个新的实例开始的:

var vm = new Vue({
   //选项对象
})

在这其中vm(viewModel的简称)通常都表示vue实例的变量名。当创建一个vue实例，你都可以传入一个选项对象作为参数，完整的选项对象，你可能需要查看API文档。

一个vue应用应该由一个通过new Vue构造的根实例和许多可嵌套可复用的组件构成，这也就是说所有的组件都是vue实例。

二.数据与方法

当一个vue实例被创建完成之后，就会向它的vue响应系统中加入了data对象中能找到的所有属性，当这些属性的值发生改变之后，视图就会发生响应，也就是更新相应的值。我们来看一个例子:

//源数据对象
var obj = { name:"eveningwater" };
//构建实例
var vm = new Vue({
   data:obj
})

//这两者是等价的
vm.name === obj.name;
//这也就意味着
//修改data对象里的属性也会影响到源数据对象的属性
vm.name = "waterXi";
obj.name;//"waterXi"
//同样的，修改源数据对象的属性也会影响到data对象里的属性
obj.name = 'stranger';
vm.name;//"stranger"

可能需要注意的就是，只有data对象中存在的属性才是响应式的，换句话说，你为源数据对象添加一个属性，根本不会影响到data对象。如:

obj.sex = "男";
vm.sex;//undefined
obj.sex;//'男'
obj.sex = "哈哈哈";
vm.sex;//undefined

这也就意味着你对sex的修改并不会让视图更新，如此一来，你可能需要在data对象中初始化一些值，如下:

data:{
   str:'',
   bool:false,
   arr:[],
   obj:{},
   err:null,
   num:0
}

查看此处具体示例。

只是还有一个例外Object.freeze(),这个方法就相当于锁定（冻结）一个对象，使得我们无法修改现有属性的特性和值，并且也无法添加新属性。因此这会让vue响应系统无法追踪变化:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>freeze</title>
  </head>
  <body>
    <div id="app">
      <span>{{ message }}</span>
      <button type="button" v-on:click="reverseMessage">反转信息</button>
    </div>
    <script>
        //这里写JavaScript代码
    </script>
  </body>
</html>

js代码如下:

      var obj = {
          message: "hello,vue.js!"
      }
      //阻止对象
      Object.freeze(obj);
      var app = new Vue({
        el: "#app",
        data:obj,
        methods: {
          reverseMessage: function() {
            this.message = this.message.split("").reverse().join("");
          }
        }
      });

如此一来，无论我们怎么点击按钮，都不会将信息反转，甚至页面还会报错，如下图:

图片描述
可前往此处具体示例自行查看效果。

当然除了数据属性以外，vue还暴露了一些有用的实例属性和方法，它们通常都带有$前缀，这样做的方式是以便与用户区分开来。来看一个示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>property</title>
  </head>
  <body>
    <div id="app">
        
    </div>
    <script>
      //这里写JavaScript代码
    </script>
  </body>
</html>

js代码:

  var obj = {
     name:'eveningwater'
  }
  var vm = new Vue({
    data:obj,
  });
  //这行代码表示将vue实例挂载到id为app的DOM根节点上，相当于在实例的选项对象中的el选项，即
  //el:'#app'
 vm.$mount(document.querySelector('#app')) 
 //数据是相等的
 vm.$data === obj;//true
 //挂载的根节点
 vm.$el === document.querySelector('#app');//true
 //以上两个属性都是实例上的属性，接下来还有一个watch即监听方法是实例上的方法
 vm.$watch('name',function(oldValue,newValue){
   //数据原来的值
   console.log(oldValue);
   //数据最新的值
    console.log(newValue);
 })

接下来，可以尝试在浏览器控制台修改name的值,你就会发现watch()方法的作用了，如下图所示:

图片描述

这个示例可前往具体示例。

三.实例生命周期

每个vue实例在被创建的时候都会经历一些初始化的过程，这其中提供了一些生命周期钩子函数，这些钩子函数代表不同的生命周期阶段，这些钩子函数的this就代表调用它的那个实例。对于生命周期，有一张图:

lifecycle.png

你不需要立即这张图所代表的含义，我们来看一个示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue life cycle</title>
  </head>
  <body>
    <div id="app">
        <span>vue生命周期</span>
    </div>
    <script>
      //这里写JavaScript代码
    </script>
  </body>
</html>

js代码:

  var obj = {
     name:'eveningwater'
  }
  var app = new Vue({
    data:obj,
    beforeCreate:function(){
        //此时this指向app这个vue实例,但并不能得到data属性，因此this.name的值是undefined
        console.log('实例被创建之前，此时并不能访问实例内的任何属性' + this.name)
    }
  });

关于生命周期的全部理解，我们需要理解后续的组件知识，再来补充，此处跳过。这个示例可前往具体示例

四.模板语法

vue使用基于HTML的模板语法，在vue的底层是将绑定数据的模板渲染成虚拟DOM，并结合vue的响应式系统，从而减少操作DOM的次数，vue会计算出至少需要渲染多少个组件。

最简单的模板语法莫过于插值了，vue使用的是Mustache语法（也就是双大括号"{{}}"）。这个只能对文本进行插值，也就是说无论是字符串还是标签都会被当作字符串渲染。如:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Mustache</title>
  </head>
  <body>
    <div id="app">
        <span>{{ greeting }}World!</span>
    </div>
    <script>
      //这里写JavaScript代码
    </script>
  </body>
</html>

js代码:

 var obj = { greeting:"Hello,"};
 var vm = new Vue({
    data:obj
 });
 vm.$mount(document.getElementById('app'));

如此以来Mustache标签就会被data对象上的数据greeting给替代,而且我们无论怎么修改greeting的值，视图都会响应,具体示例。

我们还可以使用v-once指令对文本进行一次性插值，换句话说，就是这个指令让插值无法被更新:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Mustache</title>
  </head>
  <body>
    <div id="app">
        <span v-once>{{ greeting }}World!</span>
    </div>
    <script>
      //这里写JavaScript代码
    </script>
  </body>
</html>

js代码:

 var obj = { greeting:"Hello,"};
 var vm = new Vue({
    data:obj
 });
 vm.$mount(document.getElementById('app'));

在浏览器控制台中我们输入vm.greeting="stranger!"可以看到视图并没有被更新，这就是这个指令的作用，我们需要注意这个指令对数据造成的影响。具体实例

既然双大括号只能让我插入文本，那要是我们要插入HTML代码，我们应该怎么办呢?v-html这个指令就可以让我们插入真正的HTML代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>v-html</title>
  </head>
  <body>
    <div id="app">
        <p>{{ message }}</p>
        <p v-html="message"></p>
    </div>
    <script>
      //这里写JavaScript代码
    </script>
  </body>
</html>

js代码:

 var obj = { message:"<span style='color:#f00;'>hello,world!</span>"};
 var vm = new Vue({
    data:obj
 });
 vm.$mount(document.getElementById('app'));

页面效果如图所示;

图片描述

可前往具体示例。

关于HTML特性，也就是属性，我们需要用到v-bind指令，例如:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>v-bind</title>
  </head>
  <body>
    <div id="app">
        <div v-bind:id="propId">使用v-bind指令给该元素添加id属性</div>
    </div>
    <script>
      //这里写JavaScript代码
    </script>
  </body>
</html>

js代码:

 var obj = { propId:"myDiv"};
 var vm = new Vue({
    data:obj
 });
 vm.$mount(document.getElementById('app'));

打开浏览器控制台，定位到该元素，我们就能看到div元素的id属性为"myDiv",如下图所示:

图片描述

具体示例。

在绑定与元素实际作用相关的属性，比如disabled，这个指令就被暗示为true,在默认值是false,null,undefined,''等转换成false的数据类型时，这个指令甚至不会表现出来。如下例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>v-bind</title>
  </head>
  <body>
    <div id="app">
        <button type="button" v-bind:disabled="isDisabled">禁用按钮</button>
    </div>
    <script>
      //这里写JavaScript代码
    </script>
  </body>
</html>

js代码:

 var obj = { isDisabled:123};
 var vm = new Vue({
    data:obj
 });
 vm.$mount(document.getElementById('app'));

这样一来，无论我们怎么点击按钮都没用，因为123被转换成了布尔值true，也就表示按钮已经被禁用了，我们可以打开控制台看到:

图片描述

你可以尝试这个示例具体示例。

在使用模板插值的时候，我们可以使用一些JavaScript表达式。如下例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>expression</title>
  </head>
  <body>
    <div id="app">
      <p>{{ number + 1 }}</p>
      <p>{{ ok ? "确认" : "取消" }}</p>
      <p>{{message.split("").reverse().join("")}}</p>
      <div v-bind:id="'my' + elementId">
        元素的id为<span :style="{ 'color':color }">myDiv</span>
      </div>
    </div>
    <script>
      //这里写JavaScript代码
    </script>
  </body>
</html>

js代码:

 var obj = {
    number: 123,
    ok: true,
    message: "hello,vue.js!",
    elementId: "Div",
    color: "red"
  };
  var vm = new Vue({
    data: obj
  });
  vm.$mount(document.getElementById("app"));

这些JavaScript表达式都会被vue实例作为JavaScript代码解析,具体示例。

值得注意的就是有个限制，只能绑定单个表达式，像语句是无法生效的。如下例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>sentence</title>
  </head>
  <body>
    <div id="app">
      <p>{{ var number = 1 }}</p>
      <p>{{ if(ok){ return '确认'} }}</p>
    </div>
    <script>
      //这里写JavaScript代码
    </script>
  </body>
</html>

js代码:

  var obj = {
    number: 123,
    ok: true
  };
  var vm = new Vue({
    data: obj
  });
  vm.$mount(document.getElementById("app"));

像这样直接使用语句是不行的，浏览器控制台报错，如下图:

图片描述

不信可以自己试试具体示例。

指令（Directives）是带有v-前缀的特殊特性，通常指令的预期值就是单个JavaScript表达式（v-for除外）,例如v-if与v-show指令，前者表示DOM节点的插入和删除，后者则是元素的显隐。所以，指令的职责就是根据表达式值的改变，响应式的作用于DOM。现在我们来看两个示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>v-if</title>
  </head>
  <body>
    <div id="app">
      <p v-if="value === 1">{{ value }}</p>
      <p v-else-if="value === 2">{{ value }}</p>
      <p v-else>{{ value }}</p>
    </div>
    <script>
      //这里写JavaScript代码
    </script>
  </body>
</html>

js代码:

  var obj = {
    value: 1
  };
  var vm = new Vue({
    el: "#app",
    data() {
      return obj;
    }
  });

运行在浏览器效果如图:

图片描述

现在你可以尝试在浏览器控制台更改vm.value = 2和vm.value = 3我们就可以看到页面的变化。你也可以狠狠点击此处具体示例查看和编辑。

我们再看v-show的示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>v-show</title>
  </head>
  <body>
    <div id="app">
      <p v-show="value === 1">{{ value }}</p>
      <p v-show="value === 2">{{ value }}</p>
      <p v-show="value === 3">{{ value }}</p>
    </div>
    <script>
      //这里写JavaScript代码
    </script>
  </body>
</html>

js代码:

var obj = {
   value:1
} 
var vm = new Vue({
    data:obj
});
vm.$mount(document.querySelector('#app'))

然后查看效果如图:

图片描述
尝试在控制台修改vm.value = 2和vm.value = 3我们就可以看到页面的变化。你也可以狠狠点击具体示例查看。

从上面两个示例的对比，我们就可以看出来v-show与v-if指令的区别了，从切换效果来看v-if显然不如v-show,这说明v-if有很大的切换开销，因为每一次切换都要不停的执行删除和插入DOM元素操作，而从渲染效果来看v-if又比v-show要好，v-show只是单纯的改变元素的display属性，而如果我们只想页面存在一个元素之间的切换，那么v-if就比v-show要好，这也说明v-show有很大的渲染开销。

而且v-if还可以结合v-else-if与v-else指令使用，而v-show不能，需要注意的就是v-else必须紧跟v-if或者v-else-if之后。当需要切换多个元素时,我们还可以使用template元素来包含，比如:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>template</title>
  </head>
  <body>
    <div id="app">
        <template v-if="value > 1">
            <p>{{ value }}</p>
            <h1>{{ value }}</h1>
        </template>
        <template v-else>
            <span>{{ value }}</span>
            <h2>{{ value }}</h2>
        </template>
    </div>
    <script>
      //这里写JavaScript代码
    </script>
  </body>
</html>

js代码:

  var obj = {
    value: 1
  };
  var vm = new Vue({
    el: "#app",
    data() {
      return obj;
    }
  });

此时template相当于一个不可见元素，如下图所示:

图片描述
尝试在控制台修改vm.value = 2就可以看到效果了，你也可以狠狠的点击此处具体示例。

对于可复用的元素，我们还可以添加一个key属性，比如:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>key</title>
  </head>
  <body>
    <div id="app">
      <template v-if="loginType === 'username'">
        <label>username:</label>
        <input type="text" key="username" placeholder="enter your username" />
      </template>
      <template v-else-if="loginType === 'email'">
        <label>email:</label>
        <input type="text" key="email" placeholder="enter your email" />
      </template>
      <template v-else>
        <label>mobile:</label>
        <input type="text" key="mobile" placeholder="enter your mobile" />
      </template>
      <button type="button" @click="changeType">
        toggle login type
      </button>
    </div>
    <script>
      //这里写JavaScript代码
    </script>
  </body>
</html>

js代码:

      var obj = {
        loginType: "username",
        count:1
      };
      var vm = new Vue({
        el: "#app",
        data() {
          return obj;
        },
        methods: {
          changeType() {
            this.count++;
            if (this.count % 3 === 0) {
              this.loginType = "username";
            } else if (this.count % 3 === 1) {
              this.loginType = "email";
            } else {
              this.loginType = "mobile";
            }
          }
        }
      });

效果如图:

图片描述
你可以狠狠的点击具体示例查看。

从这几个示例我们也可以看出v-if就是惰性,只有当条件为真时,v-if才会开始渲染。值得注意的就是v-if与v-for不建议合在一起使用。来看一个示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>v-if与v-for</title>
  </head>
  <body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in list" v-bind:key="index" v-if="item.active">
                <span>{{ item.value }}</span>
            </li>
        </ul>
    </div>
    <script>
      //这里写JavaScript代码
    </script>
  </body>
</html>

js代码:

  var obj = {
    list:[
        {
            value:'html',
            active:false
        },
        {
            value:'css',
            active:false
        },
        {
            value:"javascript",
            active:true
        }
    ]
  };
  var vm = new Vue({
    el: "#app",
    data() {
      return obj;
    }
  });

虽然以上代码不会报错，但这会造成很大的渲染开销，因为v-for优先级高于v-if,这就造成每次执行v-if指令时总要先执行v-for遍历一遍数据。你可以点击此处具体示例查看。

遇到这种情况，我们可以使用计算属性。如:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>v-if和v-for</title>
  </head>
  <body>
    <div id="app">
      <ul v-if="newList">
        <li v-for="(item,index) in newList" v-bind:key="index">
          <span>{{ item.value }}</span>
        </li>
      </ul>
    </div>
    <script>
      //这里写JavaScript代码
    </script>
  </body>
</html>

js代码:

var obj = {
    list: [
      {
        value: "html",
        active: false
      },
      {
        value: "css",
        active: false
      },
      {
        value: "javascript",
        active: true
      }
    ]
  };
  var vm = new Vue({
    el: "#app",
    //先过滤一次数组
    computed: {
      newList: function() {
       return this.list.filter(function(item) {
          return item.active;
        });
      }
    },
    data() {
      return obj;
    }
  });

如此一来，就减少了渲染开销，你可以狠狠点击这里具体示例查看。

指令的用法还远不止如此，一些指令是可以带参数的，比如v-bind:title,在这里title其实就是被作为参数。基本上HTML5属性都可以被用作参数。比如图片路径的src属性，再比如超链接的href属性，甚至事件的添加也属于参数，如v-on:click中的click其实就是参数。来看一个示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入vue.js开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>param</title>
  </head>
  <body>
    <div id="app">
        <a v-bind:href="url">思否</a>
        <img :src="src" alt="美女" />
    </div>
    <script>
      //这里写JavaScript代码
    </script>
  </body>
</html>

js代码:

  var obj = {
    url: "https://segmentfault.com/",
    src:"http://eveningwater.com/project/imggallary/img/15.jpg"
  };
  var vm = new Vue({
    el: "#app",
    data() {
      return obj;
    }
  });

效果如图所示:

图片描述

你可以点击此处具体示例查看。

v-on指令还可以添加修饰符,v-bind与v-on指令还可以缩写成:和@。缩写对于我们在繁琐的使用指令的项目当中是一个很不错的帮助。

五.计算属性与侦听器

猜你喜欢

转载自www.cnblogs.com/homehtml/p/11808117.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022