渐进式前端框架Vue.js的初步探索

一、Vue.js概述

Vue 是一套用于构建用户界面的渐进式框架;Vue核心库只关注视图层，最主要的是通过简单的 API 来实现响应数据的绑定和组合的视图组件。

1、Vue.js具体使用：

• 引入Vue.js文件

  <script src="js/vue.js"></script>
  

• 编写视图模板结构(body中的html)

  //举个例子，一个div标签就是一个视图模板
  <div id="div"> {{msg}} div>
  

• 编写脚本

  new Vue( { //编写所有的脚本内容} );
  

2、Vue.js核心对象

每一个 Vue 程序都是从一个 Vue 核心对象开始的。

• 使用格式

  let vue= new Vue( {  
  		el: "元素选择器,绑定视图模板元素",
  		data:"保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值"，
  		methods:{
    	  //定义多个方法，可直接通过对象名（this或vue）调用.
  			}});
  

• 数据绑定

  {{ 变量 }}
  

3、Vue.js快速入门

• 定义视图模板

  <div id="d">{{msdn}}div>
  

• 编写脚本代码

  new Vue({  el:"#d", data:{ msdn:"第一个vue"}   });
  

• 实现过程分析
  

二、Vue.js指令

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

1、v-html

文本插值，能将文本解析成HTML代码，例如给“文本插值”这个纯文本加粗。

• 视图模板

   <div id="div" v-html="msg">{{msg}}div>
  

• 脚本代码

  new Vue({el:"#div",data:{ msg:"文本插值"}});
  

2、v-bind

属性绑定，主要是对标签属性的绑定，例如给 “div标签绑定链接属性”。

• 视图模板

  <div id="div">
   	   //普通形式：
    				<a v-bind:href="url">百度一下a> 
    	   //简写形式：
   			 	<a :href="url">百度一下a> 
   	   //签中需要的属性前加上冒号,值是vue中data里面的变量
  div>
  

• 脚本代码

  new Vue({  el:"a", data:{ url:"https://www.baidu.com"}});
  

3、v-on

为HTML标签绑定事件，例如给一个标签绑定“鼠标点击事件”。

• 视图模板

  <div id="div">
          <div>{{name}}div>
          <button v-on:click="change()">普通形式button>
          <button @click="test()">简写形式button>// @或冒号后面是事件名称，值是vue对象中methods的方法
  div>
  

• 脚本代码

  new Vue({
     		el:"#div", data:{ name:"张三丰"},
     		methods:{ change(){ this.name = "哎哟"},test(){this.name="就是那么任性"}}
       });
  

4、v-model

表单绑定就是将变量和输入框进行双向绑定，变量改变了之后输入框里的值会改变，反之亦然。

• 视图模板

  <div id="div">
          <form autocomplete="off">
              姓名：<input type="text"  name="username" v-model="username">
              年龄：<input type="number" name="age"    v-model="age">
              测试: <input type="button" @click="look()">input>
          form>
  div>
  

• 脚本代码

   new Vue({
          el:"#div",data: { username:"张三", age:23},
          methods:{ look(){ console.log(this.username) }}
        });
  

5、V-for

列表渲染，写在需要循环遍历的上。

• 视图模板

  	<div id="div">
  			<ul>
  				<li v-for="name  in names">  {{name}} li>
  				<li v-for="value in student">{{value}}li>
  			ul>
    div>
  

• 脚本代码

  	new Vue({
  			el:"#div",data:{ names:["张三","李四","王五"], student:{ name:"张三",age:23 } }
         });
  

6、条件渲染

条件性的渲染某元素，判定为真时渲染,否则不渲染，一般的条件渲染就是：if语句格式。根据条件展示某元素的指令是v-show：区别在于切换的是 display 属性的值。

• 视图模板

   <div id="div">
    
       		<div v-if="num % 3 == 0">div1div>
  			<div v-else-if="num % 3 == 1">div2div>
  			<div v-else="num % 3 == 2">div3div>
  		    <div v-show="flag">div4div>
   div>
  

• 脚本代码

    new Vue({
            el:"#div",data:{ num:1, flag:false }
         });