Vue.js 核心特性

数据驱动视图
组件化开发

1. 数据驱动视图

• 数据变化会自动更新到对应元素中，无需手动操作 DOM，这种行为称作单向数据绑定 (数据变化导致视图变化)。

• 对于输入框等可输入元素，可设置双向数据绑定。双向数据绑定是在数据绑定基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定。

Vue.js 的数据驱动视图是基于 MVVM 模型实现的。

MVVM (Model – View – ViewModel )是一种软件开发思想

Model 层，代表数据
View 层，代表视图模板
ViewModel 层，代表业务逻辑处理代码

数据驱动视图优缺点:

• 基于MVVM 模型实现的数据驱动视图解放了DOM操作

• View 与 Model 处理分离，降低代码耦合度

• 但双向绑定时的 Bug 调试难度增大

• 大型项目的 View 与 Model 过多，维护成本高

2. 组件化开发

• 组件化开发，允许我们将网页功能封装为自定义 HTML 标签，复用时书写自定义标签名即可。

• 组件不仅可以封装结构，还可以封装样式与逻辑代码，大大提交了开发效率与可维护性。

Vue.js 基础语法

Vue 实例

Vue 实例是通过 Vue 函数创建的对象，是使用 Vue 功能的基础。

基础选项

el 选项

用于选取一个 DOM 元素作为 Vue 实例的挂载目标, 只有选取单个的。

只有挂载元素内部才会被 Vue 进行处理，外部为普通 HTML 元素。一般会设置一个容器.

• 代表 MVVM 中的 View 层（视图）。

书写方式

可以为CSS 选择器格式的字符串 或 HTMLElement 实例，但不能为 html 或 body。 Vue必须要第一个字母大写.

挂载完毕后，可以通过 vm.$el 进行访问。

    //方式一
    var vm = new Vue({
      el:"#app"
    });
    console.log(vm.$el);

    //方式二
    var app = document.getElementById("app");
    var vm = new Vue({
      el:app
    });
    console.log(vm.$el);

未设置 el 的 vue 实例，也可以通过 vm.$mount() 进行挂载，参数形式与 el 规则相同。 vm.$mount()中挂载的参数与之前是相同的, 可以是CSS 选择器格式的字符串或 HTMLElement 实例.

    var vm = new Vue({});
    vm.$mount("#app");

    console.log(vm.$el);

    var app = document.getElementById("app");
    var vm = new Vue({});
    vm.$mount(app);
    console.log(vm.$el);

插值表达式

挂载元素可以使用 Vue.js 的模板语法，模板中可以通过插值表达式为元素进行动态内容设置，写法为 {{ }}。

  <div id="app">
    <ul>
      <li>第一段:{{ 10+2+3 }}</li>
      <li>{{ 22 > 3? "22da" : "3da"}}</li>
    </ul>
  </div>

  <script src="lib/vue.js"></script>
  <script>
     var vm = new Vue({
       el: "#app"
     });
  </script>

注意点：

• 插值表达式只能书写在标签内容区域，可以与其它内容混合。

• 内部只能书写 JavaScript 表达式，不能书写语句。

data 选项

用于存储 Vue 实例需要使用的数据，值为对象类型。

data 中的数据可以通过 vm.$data.数据 或 vm.数据 访问。

data 中的数据可以直接在视图中通过插值表达式访问。 data 中的数据为响应式数据，在发生改变时，视图会自动更新。

  <div id="app">
    <p>{{title}}</p>
  </div>

  <script src="lib/vue.js"></script>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
      title: "标题文本"
    }
   });

   vm.title = "新的标题文本";
   
   console.log(vm.$data.title);
   console.log(vm.title); // 更常用
  </script>

data 中存在数组时，索引操作与 length 操作无法自动更新视图 (其他pop()方法等是正常的)，这时可以借助 Vue.set(vm.数组名, 数组索引值, 更改的值) 方法替代操作。

比如在控制台中更改这两个属性, 实际在在页面上是无法更新的:

  <div id="app">
    <p>{{arr[0]}}</p>
    <p>{{arr[1]}}</p>
    <p>{{arr[2]}}</p>
  </div>

  <script src="lib/vue.js"></script>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
      arr: ["1","2","3"]
    }
   });

  Vue.set(vm.arr,2,"hello");
  </script>

methods 选项

用于存储需要在 Vue 实例中使用的函数。

methods 中的方法可以通过 vm.方法名 访问。

方法中的 this 为 vm 实例，可以便捷的访问 vm 数据等功能。

    <div id="app">
        <p>{{ fn(title1 )}}</p>
        <p>{{ fn(title2 )}}</p>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data: {
                prefix: "处理结果:",
                title1: "a-b-c-d-e",
                title2: "b-c-d-e",
            },
            methods:{
                fn(value){
                    console.log(this);
                    return this.prefix + value.split("-").join("");
                }
            }
        })
    </script>

Vue(一) - Vue基础知识