Vue基础--Vue从入门到工作

1 Vue基础

1.1 与传统网页的比较

传统网页开发步骤：

1. 通过ajax去请求服务器中的内容
2. 当数据获取到本地以后，根据数据生成对应的网页结构，形成我们最终看到的网页。
3. 通过事件的设置来监听用户对元素的操作，以监听用户操作而导致的数据变化
4. 当元素发生变化时，我们需要将用户操作导致的结果发送给服务器，告知服务器客户端进行了那些处理
5. 根据用户操作更新结构

缺点：

• DOM操作频繁，代码繁杂
• DOM操作与逻辑代码混合，可维护差
• 不同功能区域书写在一起，可维护性低
• 模块之间的依赖关系复杂（怎么理解）

1.2 Vue.js简介

是什么？：渐进式前端框架。

什么是框架？：需要遵守规则去使用的工具。

什么是渐进式？：如果一个项目需要完整的遵守规则才能使用，那么这个项目对框架的依赖性就比较强（或者说这个框架比较重）。而如果在传统网页（项目）中找到一小部分功能使用Vue.js去开发。我觉得开发效率很高，还可以把其他功能也用Vue.js开发，那这就做到了渐进式开发。

1.3 Vue.js核心特性

1.3.1 数据驱动视图（数据和视图元素的变化）

• 在Data中声明数据以后，将数据绑定到视图中，数据变化会自动更新到视图中对应元素中，无需手动操作DOM，这种行为称作单向数据绑定。（由数据变化导致视图更新）
• 对于输入框等可输入元素，可设置双向数据绑定。双向数据绑定是在数据绑定基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定。

例如：<input> <textarea> <checkbox> <select>

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

MVVM（ Model-View- ViewModel）是一种软件开发思想

• Model层，代表数据
• View层，代表视图模板（元素结构/视图元素）DOM
• View Model层，代表业务逻辑处理代码。进行View和Model层功能的结合。Vue实例

例如将model层中的数据暴露并绑定给View层中的对应结构，当Model层中的数据改变以后，VM可以将数据自动更新到View层中，实现数据绑定操作。

数据驱动视图优缺点：

优点	缺点
基于MVVM模型实现的数据驱动视图解放了DOM操作。view与 Model处理分离，降低代码耦合度	双向绑定时的bug调试难度增大。大型项目的View与Model过多，维护成本高。

1.3.2 组件化开发

组件是什么？自定义的html标签

• 组件化开发，允许我们将网页功能封装为自定义 HTML 标签，复用时书写自定义标签名即可。
• 组件不仅可以封装结构，还可以封装样式与逻辑代码，大大提高了开发效率与可维护性。

1.4 Vue.js基础语法

通过Vue函数（构造函数）创建Vue实例，来使用Vue的功能。

var vm = new Vue({
   
    el:"#app",
    data:{
   
        title:'刺客五六七',
        name:'whitenot1',
        txt:'x-y-z'
    },
    methods:{
   
        out(){
   
            console.log(this.title);
            console.log(this.name);
        },
        print(ele){
   
        	console.log(ele);
        }
      
})

1.4.1 Vue的基础选项：

el选项

选取一个DOM元素作为实例的挂载点（功能生效范围）。代表view层。不能挂载html和body上。

• how：css选择器法，或者原生js获取元素后再挂载。

• 挂载完成后：通过vm.$el进行访问。

• 未设置el的vue实例，可以通过vm.$mount()挂载

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

data选项

存储Vue实例的数据，值为对象类型

• 可通过vm.$data.数据访问/vm.数据访问

• data中的数据可以直接在视图中通过插值表达式访问

• data中的数据为响应式数据，在发生改变时，视图会自动更新（数据驱动视图）

• data中存在数组时 索引操作与length操作无法自动更新视图✘✘

  注：可借助Vue.set()方法更新数组中的数据，视图会自动更新。

  Vue.set(要更改的数组名，索引值,'生效的内容');
  

methods选项

存储Vue实例要使用的函数

• 可通过vm.方法名访问
• 方法中的this代表Vue实例，方法可以用this.数据便携访问Vue的数据和方法，而不用使用vm.数据。

插值表达式（不是基础选项）

挂载元素内部可以使用Vue.js的模板语法：{ {}}。

功能：进行元素动态内容设置。

• 元素内容可设置组合形式（页面上显示表达式的结果）

  <li>计算结果为：{
       {1+2+3}}</li>  //页面显示6
  <li>比较结果为：{
       {2>1? 2: 1}}</li>  //页面显示2
  

  注：插值表达式只能写在标签内容区域，不能写在标签上。内部可以写javascript表达式，但不能书写javascript语句。

• 或者结合数据绑定操作，为元素进行动态内容设置

  <li>{
       {data}}</li>			//模板语法里可以写Vue中data数据
  <li>{
       {print(name)}}</li>	//模板语法里可以写Vue中methods方法，方法的功能一般是return回一个被更改的具体的数据，Vue中data数据可以直接作为函数的参数
  <li>Vue实例中data中的name值为：{
       {name}}</li> 	//whitenot1
  <li>内部可以写javascript表达式：{
       {txt.split('-').join('')}}</li> 
  

1.4.2 指令

HTML的属性分为

• 固有属性:class title id等支持HTML自身功能的属性。

• 自定义属性：一般存储与当前元素有关的数据内容。

指令的本质是HTML的自定义属性，把指令设置给HTML元素以后，框架可以识别出特定的自定义属性，然后快速进行功能处理，简化DOM操作，相当于**对基础DOM操作进行封装**。

Vuejs的指令就是以v-开头的自定义属性

var vm = new Vue({
   
    el:"app";
    data:{
   
    	content:'内容文本',
    	content1:'<span>span中的内容文本</span>'
	}
})

内容处理

v-once指令

使元素内部的插值表达式只生效一次，为静态数据，不会动态更新。

<div id="app">
    <p>这里的数据会动态更新：{
  {content}}</p>
    <p v-once>这里的数据不会动态更新：{
  {content}}</p>
</div>

v-text指令

元素内容整体替换为指定纯文本数据。（动态绑定）

<div id="app">
    <p v-text="content">这段内容会被覆盖</p> <!--内容文本-->
</div>

v-html指令

元素内容整体替换为指定HTML文本。（动态绑定）

<div id="app">
    <p v-html="content1">这段内容会被覆盖</p> <!--span中的内容文本-->
</div>

属性绑定

var vm = new Vue({
   
    el:"app";
    data:{
   
    	title:'刺客武六七',
    	name:'whitenot1',
    	attrObj:{
   
    		id:'box',
    		title:'示例内容',
    		'data-title':'这是data-title的内容',
    		cls='x'
		}
	}
})

v-bind指令

用于动态绑定HTML属性。可以简写为:xx(xx为属性名称)

用法：

1. 设置纯数据：

<div id="app">
    <p v-bind:title="title">标签内容</p> 
    <p :title="title">标签内容</p> 
</div>设置表达式

2. 设置表达式

<div id="app">
    <p :class="'whitenot1'+ 10">标签内容</p> <!--whitenot110-->
    <p :class="name+3">标签内容</p> <!--whitenot13-->
    <p :class="3+5+7+name">标签内容</p> <!--15whitenot1-->
</div>设置表达式

3. 一次绑定多个属性，还可以绑定对象。

<div id="app">
    <p v-bind="attrObj">标签内容</p> 
</div>设置表达式

class绑定

class是HTML属性，可以通过 v-bind进行绑定，并且可以与class属性共存。

用法：

​ 1. 单个类名绑定

<div id="app">
    <p class="a" :class="cls">标签内容</p> 
</div>设置