Vue.js基础语法(一）

初识Vue.js

1. 简介

1. 1 传统网页开发步骤

1.2 传统网页开发的问题

1.3 什么是Vue.js

Vue是一种前端流行框架，更多内容参考官网

2. Vue.js核心特性

1. 数据驱动视图：数据变化会自动更新到对应元素中，无需手动操作DOM。

   • 单向数据绑定：数据变化导致视图变化

   • 双向数据绑定：输入框等可输入元素，实现了数据和元素内容的双向绑定。

   • MVVM模型

     • Model

     • View

     • ViewModel

   • 数据驱动视图的优缺点

     • 解放DOM操作
     • View与Model分离，降低代码耦合度
     • 双向绑定时的Bug调试难度大
     • 大型项目的View和Model过多，维护成本高

2. 组件化开发：
   自定义HTML标签，复用时书写自定义标签即可。
   组件不仅可以封装结构，也可以封装样式和逻辑，大大提高了开发效率。

3. Vue.js安装方式

• 本地引入
  • 开发版本
  • 生产版本
• cdn引入
  • 最新稳定版
  • 指定版本
• npm引入
  • 最新稳定版： npm install vue
  • 指定版本： npm install [email protected]

Vue.js基本语法

1. Vue实例

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

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

2. el选项

1. 只能设置单个元素（一个DOM元素）。
2. 只有挂载元素才会被Vue处理，外部为普通HTML元素。
3. 代表MVVM中的View层
4. 格式： css选择器格式的字符串或者HTMLElement实例。不能为html或者body。

var vm = new Vue({
	el: '#app'
})

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

var vm = new Vue({
  el: '#app'
});

console.log(vm.$el);

6. 未设置el的Vue实例，也可以通过$mount进行挂载

var app = document.getElementById('app');
var vm = new Vue({});
vm.$mount(app);

3. 插值表达式

插值表达式可以为元素进行动态内容设置，写法为{{ content }}

• 只能书写在标签内容区域,可以与其他内容混合。
• 只能书写表达式，不能书写语句

    

      
第一段示例内容：{{ 10 + 20 + 30 }}
      
第二段示例内容：{{ 22 > 3 ? '22比3大' : '3比22大' }}
      
      
    

4. data选项

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

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

	var vm = new Vue({
        el: '#app',
        data: {
          title: '标题文本'
        }
   });
  //  console.log(vm.$data.title);
  //  console.log(vm.title); // 更常用

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

4. data中存在数组时，数组通过索引和length操作数组无法更新视图,，通过Vue.set(vm.arr, index,'newContent‘）进行替代操作

5. methods选项

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

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

	var vm = new Vue({
      el: '#app',
      data: {
        prefix: '处理的结果为：'
      },
      methods: {
        fn (value) {
          // console.log(this);
          return this.prefix + value.split('-').join('');
        }
      }
    });

Vue.js基础指令

指定的本质就是HTML自定义属性，通常是以v-开头的自定义属性

1. 内容处理

1.1 v-once

内部的插值表达式只生效一次

1.2 v-text

元素内容整体替换为指定纯文本数据

<p v-text="span的内容"></p>

1.3 v-html

元素内容整体替换为指定的HTML文本

这是默认的文本内容

2. 属性绑定

2.1 v-bind

1. 用于动态绑定HTML属性

2. 简写形式:

3. v-bind中允许使用表达式，但是不允许使用语句

4. 如果需要一次绑定多个属性，还可以绑定对象（自定义属性名为字符串格式）

2.2 Class绑定

1. class可以通过v-bind绑定，并且可以和原有的class属性共存

2. class绑定的特殊处理方式

   • 对象

   • 数组

2.3 Style绑定

1. style可以通过v-bind绑定，并且可以与style属性共存。
2. 希望给元素绑定多个样式对象时，可以设置为数组。

3. 渲染指令

3.1 v-for指令

1. 用于遍历数据渲染结构，常用的数组和对象均可以遍历。

• 获取内容 item in arr

• 获取内容和索引(item,index)

• 对象(value,key, index)

2. 注意点：使用v-for的同时，应该使用key :key="" key的设置不推荐使用index, 绑定的key一定是一个唯一的值

面试题：为什么要使用key

• 提高渲染效率
• 避免问题

template模板占位符,可以将部分元素或内容作为整体进行操作。

template不能设置key,要设置在一个具体的标签上。

3.2 v-show指令

1. 用于控制元素显示与隐藏，适用于显示隐藏频繁切换时使用。

2. 内部可以书写表达式