Vue基本语法01

二 : Vue 介绍

vue 中文网 https://cn.vuejs.org/
github 下载地址 https://github.com/vuejs/vue
Vue.js (读音 /vju:/ view)
渐进式 JavaScript 框架
4.1 渐进式 :
小型项目就可以使用 vue 就高度了
随着页面的复杂程序提高,就要学习 vue-rouer 来管理更多的页面
再随着项目的数据越来越多,管理数据也变得麻烦起来了,就开始使用 vuex 来管理数据

4.2 框架 : 一整套的解决方案

框架和库的区别 (面试)

####1. 库(Library) , 代表 : jquery

库就是一系列函数的集合, 我们开发人员在使用库的时候,想要完成什么样的功能,就调用库中提供的某个方法

比如 : 想要添加样式, 就调用 jquery 中的 .css() / .addClass()

库起到了一个辅助的作用, 在使用库的是时候,是由开发人员说了算, 也是由开发人员起主导作用.

比如 : 想给 A:设置样式 A.css(), B:addClass() C:style.background=‘red’

####2. 框架 (Framework), 代表:vue

在使用框架的时候,是由框架说了算,由框架起到了主导作用,
框架是一套完整的解决方案,框架中制定了一套规则,使用框架的时候,只需要按照规则,把代码放到合适的地方,然后框架会在合适的时机,主动调用开发人员的代码

比如 : 想用vue,组件里遍历就得使用 v-for, 下次不用 v-for 了,使用 for 不行 v-for=‘item in list’

主要区别 : 控制反转

也就是 : 谁起到了主导作用

使用库的时候 : 开发人员起主导作用
使用框架的时候:框架起到了主导作用
从体量上看,框架一般比库大
会发现使用框架的时候,会受到很多限制
我们所说的前端框架与库的区别？
https://zhuanlan.zhihu.com/p/26078359?group_id=830801800406917120

三 : MVC + MVVM (面试)

第 3.1 MVC

MVC 是一种软件架构模式,也有人叫做设计模式
M : Model 数据模型 (专门用来操作数据,数据的 CRUD)
V : View 视图 (对于前端来说,就是页面)
C : Controller 控制器 (是视图和数据模型沟通的桥梁,用于处理业务逻辑)
看图

第 3.2 MVVM

Vue 使用的是 MVVM 模式

为什么要学习 MVVM ?

MVVM ===> M / V / VM
M : model 数据层
V : view 视图层
VM : ViewModel 视图模型
核心 : M <=> VM <=> V

第 3.3 MVVM 优势

MVC 模式将应用程序划为三个部分,实现职责分离
- 但是,在前端中,经常要通过 js 代码来进行一些逻辑操作,最终还要把这些逻辑操作展示页面中, 也需要频繁的操作DOM
- DOM是前端性能的瓶颈
- 比如 : ajax 请求、添加、修改、设置样式、动画
MVVM 提出来的思想通过数据双向绑定让数据自动的双向同步
- V (修改视图) --> M
- M (修改数据) --> V
采用的是 : 数据驱动视图的思想, 数据是核心
以后如果想要操作 DOM, 立马想到的不是应该是拿到元素设置,而是数据

第 3.4 Vue 中的 MVVM

注意 : 不推荐直接手动操作 DOM
每个人操作 DOM 的方法不一样,会造成性能不一样
官网 : 虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

第 3.5 学习 Vue 要转化思想

数据驱动视图 : 不要再想着怎么操作 DOM, 而是想着如何操作数据

MVC 与 MVVM 区别?

四 : 起步 - Hello Vue

第 4.1 : 基本使用

安装 : npm i vue (小写)
导入 :

实例 vue

 const vm = new Vue({
   // 指定 vue 管理的边界
   el: '#app',
   // 提供视图中 需要的数据,视图可以直接使用data中的数据
   data: {
     msg: 'xxx'
   }
 })

第 4.2 : 使用注意点

vm 官网建议
Vue 构造函数首字母大写
参数是一个对象
id=’#app’, 其他也可以 class=’.abc’
边界外的无法使用 msg

4.3 {{}} 插值表达式

1. {{}} Mustache 小胡子语法, 插值表达式
2. 作用 : 使用{{}} 从data中获取数据,并展示在模板中
3. 说明 : {{}} 中只能出现 js 表达式

- 表达式 (有返回值的)
  - 常见的数据类型 1 'abc' false [] {}
  - 数据类型 和 运算符结合在一起1+2 arr.join('-') true ? 123 : 321
- 语句 if语句 for语句

{{}} 语法不能作用在 HTML 元素的属性上

五 : 数据双向绑定演示

第 5.1 : 一个 input + v-model

 v-model 指令 : 数据双向绑定的指令
 作用 : 把data中的msg值 和  input上的值 绑定到一起
 注意 : v-model只能用在 表单控件上 (input checkbox 等)
 > 可以在浏览器分别演示 V => M  和 M =>V

第 5.2 : Object.defineProperty

内在-响应式原理

let obj = {}
let temp

obj.name = 'zhanhgsan'

// 参数1 : 要给哪个对象设置属性
// 参数2 : 给对象设置什么属性
// 参数3 : 属性的修饰符
Object.defineProperty(obj, 'name', {
  set: function(newVal) {
    console.log('赋值了', newVal)
  },
  get: function() {
    console.log('取值了')
    return temp
  }
})

第 5.3 : 数据双向绑定的原理

演示 : V ==> M

//2.1. 拿到文本框

 const txt = document.getElementById('txt')

//2.2 时刻监听txt ,拿到最新的值

 txt.oninput = function() {
   console.log(this.value)
   obj.name = this.value
 }

//2.3 数据模型

 var obj = {}
 let temp
 
 Object.defineProperty(obj, 'name', {
   // 给属性赋值的时候会掉
   set: function(newVal) {
     console.log('调用了set', newVal)
     temp = newVal
     txt.value = newVal
   },
   get: function() {
     console.log('调用了get')
     return temp
   }
 })

V => M (视图层 => 数据层)

//1. 获取 input的值,最新值
//2. 通过监听oninput 拿到最新值
//3. 把最新值赋值给 obj.name
//4. 就会掉了set方法,就会修改了数据
M => V (数据层 => 视图层

//1. obj.name = ‘xxx’
//2. 调用 set方法
//3. 把值赋值给input元素

六 : 指令学习

第 6.0 指令

指令 : 就是一个特殊的标记, 起一个辅助作用, 使 html 具备原来没有的功能
vue 中所有的指令, 都是以 v-开头的
比如 : v-model v-bind v-if v-for 等等

第 6.1 v-model (常用)

说明 : 用在表单元素中, 用来实现数据双向绑定 (input checkbox 等等)

作用 : 将数据txt 和文本框的值绑定到一起, 任何一方发生改变,都会引起对方的改变

注意 : v-model 在不同类型的表单元素中,该指令的作用不同

<!-- 文本输入框 绑定的是值 (文本值) -->
<input type="text" v-model="name" />

<!-- 多选框  绑定的选中状态 (布尔值) -->
<input type="checkbox" v-model="isChecked" />

const vm = new Vue({
  el: '#app',
  data: {
     name : 'zs',
     isChecked : true
   }
})

第 6.2 v-text 和 v-html

说明 : 设置文本内容

v-text(写在头标签里面) : [相当于之前的 innerText , 设置文本内容(不识别 html 标签)] == {{}} 双标签内部
v-html(写在头标签里面) : [相当于之前的 innerHTML , 设置文本内容(识别 html 标签)] == {{}} 双标签内部

例如:

v-text 和  v-html 
  1. v-text 相当于之前 innerText   (功能和{{ }} 一样,,只不过位置不一样)
      不识别 h1 标签,,只当字符串使用

      v-text 写在头标签里面
      {{}}  写在 双标签内部

  2. v-html 相当于之前  innerHTML
      识别标签

  <div id="app">
     <!-- v-text -->
     <div  v-text='msg1'></div>  //  字符串
 
     <!-- v-html -->
     <div v-html='msg2'></div>  //  能识别标签
 
     <div>{{ msg1 }}</div>   //  字符串
  </div>
  
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
       el: '#app',
       data: {
          msg1 : '<h1>我是测试 v-text的</h1>',
          msg2 : '<h1>我是测试 v-html的</h1>',
        }
     })
 </script>

第 6.3 v-bind (常用)

说明 : 动态绑定数据 (单向)

出现原因 : 在 HTML 属性中, 无法使用插值表达式

步骤:

// 加载静态数据
 <a href="https://wbaidu.com">aaa</a>
 
// 想加载动态数据  {{ }}可以获取data中的数据
// 但是 **{{}} 不能使用在属性中**

<a href="{{ src }}">aaa</a>
// 所以使用 v-bind
<a v-bind:href="{{ src }}">aaa</a>   ok
<img v-bind:src="src">   ok

缩略 : v-bind 全部省略只留下一个:

改为 :

<a :href="src">aaa</a> ok
<img :src="src" /> ok

以后使用

静态加载数据 :

<a href="https://wbaidu.com">aaa</a>

动态加载数据 :

<a :href="href">aaa</a>

第 6.3.1 v-bind 和 v-model 的区别

//  v-model :  数据双向绑定         表单元素上
//  v-bind :   动态绑定数据(单向)   任意元素动态读取属性

容易出错点 : 
<!--  v-model 数据双向绑定 -->
<!--场景 :  表单元素中 -->
<input type="checkbox" v-model="isChecked1" /> <br />

<!--  v-bind 数据动态绑定 (单向) -->
<!--场景 :  主要用在属性中 -->
<input type="checkbox" :checked="isChecked2" />*

第 6.4 操作样式

1.操作样式

<!-- 1. 静态类名 -->
<h1 class="red">哈哈</h1>

<!-- 2. 动态类名 -->
<h1 :class="cls">哈哈</h1>

<!-- 3. 最常用 -->
<!-- :class 里的值是一个对象 
      键 : 类名 (可能会要,也可以不要)
      值 : 布尔值, true/false 确定类要不要
-->
<h1 :class="{ red:isRed , fz:isFZ}">哈哈</h1>

<!-- 4. style -->
<h1 :style="{ color : 'red', fontSize : fz + 'px' }">哈哈</h1>

2.其他操作

<!-- 1 -->
<!-- 重点 -->
<div :class="{ active: true }"></div>
===>
<div class="active"></div>

<!-- 2 -->
<div :class="['active', 'text-danger']"></div>
===>
<div class="active text-danger"></div>

<!-- 3 -->
<div :class="[{ active: true }, errorClass]"></div>
===>
<div class="active text-danger"></div>

--- style ---
<!-- 1   -->
<h1 :style="{ color : 'red', fontSize : fz + 'px' }">哈哈</h1>
<!--  fz : 80 -->

<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是对象 -->
<!-- 如果有相同的样式，以后面的样式为准 -->
<div :style="[baseStyles, overridingStyles]"></div>

第 6.5 v-on 指令

注册事件/绑定事件

v-on:click 绑定了一个单击事件

后面是事件名称
```
<button v-on:click="fn">按钮</button>
```
缩写 : @click=‘fn’
<button @click=‘fn’>按钮
函数写在 methods 里面

fn : function(){ … }
fn() { … }

函数里面的 this 指的就是 vm 实例

  在函数里面操作数据
  获取数据  this.msg
  修改数据  this.msg = 'XXX'

传参
5.1 正常传参

@click=‘fn(123)’

5.2 事件对象 $event

	<!-- 4.1 绑定事件对象的时候, 没有添加小括号,此时,直接在方法中,通过参数 e 就可以获取到事件对象 -->
	<!-- 4.2 如果添加小括号,就拿不到事件对象了,vue留了一个$event -->
	<button @click="fn1($event,123)">我是按钮</button>

6.5 v-for

v-for 指令：遍历数据，为数据中的每一项生成一个指令所在的标签
代码示例

<!-- 需求1 : 最常用 遍历数组 -->
    <!-- 作用 : 遍历 list1 数据, 为数据中的每一项生成一个li标签 -->
    <!-- item 数组里的每一项元素 -->
    <ul>
      <li v-for="(item,index) in list1">{{ item }} - {{ index }}</li>
    </ul>
    
<!-- 需求2 : 遍历元素是对象的数组 -->
    <ul>
      <li v-for="item in list2">{{ item.name }} - id:{{ item.id }}</li>
    </ul>
    
<!-- 需求3 : 遍历对象 -->
    <ul>
      <li v-for="(v,key) in obj">{{ v }}-{{ key }}</li>
    </ul>
    
<!-- 需求4 : 想要生成10个h1 -->
  	<h1 v-for="item in 10">我是h1 {{ item }}</h1>

//  1. 重点是遍历数组,,其他的了解即可

猜你喜欢