vue.js基础知识篇(1):简介、数据绑定

Z时代
2024-01-10
分类：综合

vue

目录
第一章:vue.js" title="vue.js">vue.js是什么？ 
第二章:数据绑定
第三章:指令
第四章:计算属性
第五章:表单控件绑定
代码
链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79

1.vue.js是MVVM框架

MVVM的代表框架是Angular.js，以及vue.js。

MVVM的view和model是分离的，View的变化会自动更新到ViewModel上，ViewModel的变化会自动同步到View上显示。这种自动同步依赖于ViewModel的属性实现了Observer。

2.它与angular.js的区别

相同点:都支持指令、过滤器和双向绑定，都不支持低端浏览器。

不同点:

(1)学习成本不一样，比如ng有依赖注入。

(2)性能上ng依赖对数据做脏检查，所以watcher越多越慢。vuel.js依赖于追踪的观察并且使用异步队列更新，所以数据都是独立触发的。

3.vue.js的安装

可以通过Script标签引入vue.js文件，可以通过npm安装。

4.第一个hello world程序

(1)通过npm安装vue的使用

step1:

$ npm init

$ npm install vue --save-dev

step2:

//app.js代码

var vue=require("vue");
console.log(vue);

运行，

$ node app.js

OK。

(2)直接通过script标签引入vuel.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js</title>
</head>
<body>
   <div id="didi-navigator">
       <ul>
           <li v-for="tab in tabs">
               {{tab.text}}
           </li>
       </ul>
   </div>
   <script src="js/vue.js"></script>
   <script>
       new Vue({
           el:"#didi-navigator",
           data:{
               tabs:[
                   {text:"巴士"},
                   {text:"快车"},
                   {text:"顺风车"},
                   {text:"出租车"},
                   {text:"代驾"}
               ]
           }
       });
   </script>
</body>
</html>

第一个hello world程序

浏览器的显示效果是

第2章:数据绑定

1.语法

(1)类似angularjs的{{}}，插值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <div>Text:{{text}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                text:"我是文本"
            }
        })
    </script>
</body>
</html>

可以看到如果text的值发生改变，文本中的值也会联动的变化。(竟然难过:(。书上说的使用星号实现单次渲染、3个大括号填入HTML片段，用1.0.24版本的控制台报错，说是不合法的表达式，说明这两种怪异的语法已经过时了。)

注意:vue指令和自身的特性是不可以插值的。

(2)表达式

表达式由js表达式和过滤器构成。过滤器本质是一个函数，要使用过滤器，要先写过滤符(|)。

关于大写过滤器的例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{msg|uppercase}}</div>
</div>
<script src="js/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"eeeeeeeqeeecfff"
        }
    })
</script>
</body>
</html>

显示效果:

关于过滤器的到底有哪些内置的，可以通过查看源代码获取到。搜索"var filters={"，就能找到源代码了。

(3)指令

指令是带有v-前缀的特殊特性，其值限定为绑定表达式，也就是js表达式和过滤器，那么当表达式的值发生变化时，这个变化也会反映到DOM上。

2.可以通过Vue.config配置数据绑定的语法

vue.js中数据绑定的语法被设计为可配置。

//delimiters搜索源码

var delimiters = ['{{', '}}'];
var unsafeDelimiters = ['{{{', '}}}'];
//...............
delimiters: { /**
                   * Interpolation delimiters. Changing these would trigger
                   * the text parser to re-compile the regular expressions.
                   *
                   * @type {Array<String>}
                   */
      get: function get() {
        return delimiters;
      },
      set: function set(val) {
        delimiters = val;
        compileRegex();
      },
      configurable: true,
      enumerable: true
    },

源代码说的很清楚，configurable是可配置的。

核心代码就一句:Vue.config.delimiters=["<%","%>"]。delimiters是config对象的属性，规定了默认的文本插值的分隔符。例子如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div><%msg%></div>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.config.delimiters=["<%","%>"]
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"eeeeeeeqeeecfff"
        }
    })
</script>
</body>
</html>