Vue从入门到精通(一)

最新推荐文章于 2024-05-13 22:30:10 发布

itxcr

最新推荐文章于 2024-05-13 22:30:10 发布

阅读量228

点赞数

分类专栏： Vue 文章标签： Vue

xcr

本文链接：https://blog.csdn.net/it_xcr/article/details/102821913

版权

Vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1.1 Vue简单使用

目标
- 元素内容区域
- 元素属性
- 元素绑定事件
- v-model双向数据绑定
- 遍历指令
步骤
- 创建div容器
- 引入vue.js文件
- 实例化对象
注意：
- Vue需要有目标操作容器，可以是div、p、span等等许多标签，一般推荐用div
- {{}}等vue的内容要放到div容器里
- {{}}双花括号是vue的语法
- el、data是vue内部固定的标志名称
- data内部可以声明一个或多个数据供使用

1.2 Vue-MVVM设计模式

目标：
- 了解MVVM各部分含义和对应代码
MVVM：
- m：model 数据部分 data
- V： view 视图层 div容器
- vm： view model 视图和数据的结合体

1.3 Vue指令

插值表达式 {{}}
- 在html标签的内容区域表现数据，可以使用{{}}双花括号，叫做插值表达式。
- 语法：
  - <标签>{{表达式}}</标签>
  - 表达式可以是：常量、变量、算数运算符、比较运算符、逻辑运算符、三元运算符等。
  - 如果{{}}使用有冲突，可以在实例中添加这个属性，更改差值表达式的规则
    - delimiters: ['$', '$']//标记符号就变成了 $$。
v-text
- v-text 与 {{}} 作用是一样的，操控标签的内容区域信息
- <标签 v-text="表达式"></标签>
- 注意：
  - 虽然v-text 是标签的属性，但是属性值会添加到标签的内容区域中
  - v-text的属性值一般要求是普通字符串，如果是html标签，标签的**<>箭头符号**会被变为实体符号
  - 如果标签内容区域有默认信息，则会被v-text的值覆盖掉
  - v-text可以进行变量、常量、算数符号、比较符号、逻辑符号、三元运算符等运算
  - Vue文件需要在div容器之后引入
- v-text 没有闪烁问题
- {{}} 在网速非常慢时候有闪烁问题
- 闪烁问题：
  - 网速非常慢时，{{}}花括号等原生内容在vue编译期间，在浏览器短时显示的现象就是闪烁
  - 闪烁是负面的内容，不如白板显示好
- 出现闪烁的条件
  - http协议方式打开应用程序文件
  - 调整网速为slow 3G
v-html
- v-html与v-text和{{}}的作用一样，都是操控标签的内容区域
- 语法：
  - <标签 v-html="表达式"></标签>
- v-html、v-text、{{}} 三者的异同
  - v-html对html标签和普通文本的内容都可以正常显示出来。
  - v-text、{{}} 只针对 字符串 起作用，如果数据中有html标签，那么标签的箭头符号要做符号实体转换，使得浏览器上直接显示标签内容，不会解析html标签内容。
    
    < 变为< // less than
    
    > 变为> // great than
  - v-html和v-text没有闪烁问题
  - 他们都可以进行 变量、常量、算术运算、比较运算、三元运算 等。
```
<p>{{xcr}}默认内容</p>
<p v-text="xcr">默认内容</p>
<p v-html="xcr">默认内容</p>
```
    上面三者，v-html和v-text标签都有默认内容，但是都会被覆盖掉，而差值表达式不会被覆盖
- 应用场景：
  - 如果服务器返回的数据中，包含有HTML标签(例如富文本编辑器内容),就可以使用v-html来渲染。
- 注意：
  - v-html应尽量避免使用(除非完全掌握)，否则会带来危险(XSS攻击、跨站脚本攻击)
  - 标签的默认内容会被v-html覆盖
v-bind(冒号)
- 属性绑定
  - {{}}、v-text、v-html可以对标签的内容区域进行操作，操作标签的属性需要通过v-bind: 指令
- 语法：
```
<标签 v-bind:属性名称="表达式" ></标签>
<标签 :属性名称="表达式"></标签> 
```
- 注意：
  - 直接使用冒号设置简易
  - 如果有需要，绑定的内容可以进行变量、常量、算术运算、比较运算、逻辑运算、三元运算等。

属性绑定 :class属性

class属性较其他属性不一样的地方是，既可以接收一个值，也可以通过空格分隔接收多个值。

<div class="apple"></div>							 <!--接收一个值-->
<div class="apple pear orange"></div>		<!--接收多个值-->

语法

对象方式

	<div :class="{xx:true, xx:false}"></div>
	<!--true: 设置   false:不设置-->

数组方式

	<div :class="['xx','yy','zz']"></div>
	<!--数组元素值如果不是data成员 就要通过单引号圈选，代表是普通字符串-->

注意：
- 通过数组方式给class绑定多个值，值如果不是 Vue成员，需要通过单引号圈选，因其为字符串内容。

属性绑定 :style属性
- style属性比普通属性特殊，其也可以接收多个值
- 语法
```
对象方式:
<p :style="{color:'red', 'font-size': '25px'}">xcr</p>

数组方式：
<p :style="[{color:'red', 'font-size': '25px']">xcr</p>

```
- 注意：
  - 数组方式绑定style属性，每个数组元素可以包含一个或多个css样式对
  - 复合属性带中横线(例如background-color)的需要通过单引号圈选，或变为驼峰名称
- 通过传统方式也可以操作class或style属性，但是vue的操作会更加精细灵活
  - 传统方式:
    - <p style="color:red; font-size:25px; background-color:lightgreen;"></p>
v-on(@)

在vue中给元素进行事件绑定，需要通过v-on:指令实现，也可以使用@符号，@是v-on:的简写，使用方便
事件类型
- 鼠标事件：onclick ondblclick onmouseenter onmouseleave onmouseover onmousedown
- 键盘事件：onkeyup onkeydown onkeypress 等等
- 语法：
```
<div v-on:事件类型="事件处理驱动"></div>
<div @事件类型="事件处理驱动"></div>  // 简便用法，推荐使用
<div @click="事件处理驱动"></div>

<script>
var vm new Vue({
  el:xx
  data:xx,
  // 给当前vue实例 声明方法，以供事件调用
  methods:{
    名称：function(){}
  }
})
</script>
```
- 注意：
  - 事件处理驱动需要通过methods定义
  - 被绑定的事件类型可以是 click、dblclick、keyup、keydown等许多个，注意不要设置on标志了

事件绑定-传递参数

vue“单击”事件参数的3种类型：

有声明()，也有传递实参，形参就代表被传递的实参
有声明(),但是没有传递实参，形参就是undefined
没有声明()，第一个形参就是事件对象

<div id="app">
  <button @click="dela(301)">删除a</button>
  <button @click="delb()">删除b</button>
  <button @click="delc">删除c</button>
</div>

<script src="./vue.js"></script>

<script>
  var vm = new Vue({
    el:'#app',
    data:{
    },
    methods:{
      dela(id){
        console.log(`id为${id}的商品被删除了`)  // 301
      },
      delb(id){
        console.log(`id为${id}的商品被删除了`)  // undefined
      },
      delc(id){
        console.log(id) // MouseEvent
        console.log(`id为${id}的商品被删除了`)  // MouseEvent
      }
    }
  })
</script>

注意：
- 没有()括号情形，由于事件类型不一样，参数的意思也会有不同，要灵活使用

事件绑定-访问data成员

事件在执行过程中需要对Vue实例的data数据进行操作，通过this关键字实现，this代表Vue实例对象，并且针对data或methods成员都可以直接进行调用

例：

给data声明city成员，值为“铁岭”
设置按钮，使得单击后控制台可以输出“铁岭是一个大城市”

<button @click="getInfo()" >获取数据</button>

<script>
  var vm = new Vue({
    el:'#app',
    data:{
      address:'铁岭'
    },
    methods:{
      getInfo:function(){
        // 通过 this关键字 获得 data区域的数据信息
        console.log(this.address+'是一个大城市');
      }
    }
  })
</script>

事件绑定的this指向：

一般this指向window对象

var age = 20
function getInfo(){
  console.log(this.age)
}
getInfo()  // 20

this代表调用该方法的当前对象

const tiger = {
  name:'东北虎', 
  act:'猛虎扑食', 
  say(){
    console.log('我的名字是'+this.name+'，我的招牌动作是'+this.act)
  }
}
tiger.say()

代表元素节点对象

<button onclick="this.style.color='red'" />确定</button>

javaScript中的this千变万化，可具体输出査看

在Vue实例内部包括不限于methods方法中，this关键字 是对象，具体与 new Vue() 是一样的

并且其可以对 data 和 methods成员进行直接访问
- 个人理解：(this 在构造函数Vue内部，指向就是实例对象)

<script>
  var vm = new Vue({
    el:'#app',
    data:{
    },
    methods:{
      showinfo:function(){
        console.log(this)    // Vue实例对象(与外部的vm完全一致)
      }
    }
  })
  console.log(vm);
</script>

注意：Vue实例内部的this与实例对象vm一致，可以使用===判断

事件绑定-方法简易设置

对methods的各个成员进行简易设置

var vm = new Vue({
  el:'#app',
  data:{
  },
  methods:{
    dela(id){
      console.log(`id为${id}的商品被删除了`)  // 301
    },
    delb(id){
      console.log(`id为${id}的商品被删除了`)  // undefined
    },
    delc(id){
      console.log(id) // MouseEvent
      console.log(`id为${id}的商品被删除了`)  // MouseEvent
    },
  }
}
// dela:function(){}   简易设置为  dela(){}
// delb:function(){}   简易设置为  delb(){}
// delc:function(){}   简易设置为  delc(){}

在其他应用中，对象中成员的方法都可以把 “:function” 去除，做简易设置，即成员名字(){}，是es6的标准规范

原理

var name = "xcr"
var height = 176
var run = function(){
  console.log('在跑步')
}

var person = {name:name,height:height,run:run}		// 正常创建对象
var person = {name, height, run}					// 简便方式创建对象

v-model 双向数据绑定
- Vue实例对数据进行修改，页面会立即感知，相反页面对数据进行修改，Vue内部也会立即感知。
- 针对表单元素使用
- v-model是vue中唯一实现 双向数据绑定 指令
  - v-bind单向数据绑定，Vue实例修改数据，页面会感知到，相反页面修改数据Vue实例不能感知
  - v-model双向数据绑定，页面修改数据，Vue实例会感知到，Vue实例修改数据，页面也会感知到
- 语法：
```
<标签 v-model="data成员"></标签>
```
- 注意:
  - v-model是vue中唯一的双向数据绑定指令
  - v-model只针对value属性可以绑定，因此经常用在form表单标签中，例如input(输入框、单选按钮、复选框)/select(下拉列表)/textarea(文本域)
  - v-model只能绑定data成员，不能设置其他表达式，否则错误
    
    v-model=“score+100” 错误
    
    v-model=“120” 错误
    
    v-model=“xcr” 正确的
  - v-model绑定的数据需要在data中提前声明好
```
  <div id="app">
    <p>{{ city }}</p>
    <p><input type="text" :value="city"></p>
    <p><input type="text" v-model="city"></p>
  </div>
  <script src="./vue.js"></script>

  <script>
    var vm = new Vue({
      // delimiters:['$','$'],
      el:'#app',
      data:{
        city:'北京'
      },
    })
  </script>
```
- v-model对应的city发生变化后，其他的{{ }} 和 :value的值也会发生变化
  - 即页面上对应的Vue实例中data的成员发生变化，vue实例内部的其值也会发生变化，同时会改变页面上其他位置有引用该成员的地方

1.4 响应式

v-model数据双向绑定步骤：
1. 页面初始加载，vue的数据渲染给div容器
2. 通过v-model修改数据，修改的信息会直接反馈给vue内部
3. vue的数据发生变化，页面上(也包括Vue实例本身)用到该数据的地方会重新编译渲染
  
  2和3 步在条件满足情况下会重复执行
4. 其中的3步骤才是“响应式”
响应式：
- vue实例的data数据如果发生变化，那么页面上用到的地方会重新编译执行，这样就把更新后的内容显示出来了，这个过程就是“响应式”
- 如果Vue实例内部对变化的数据有使用，也会同步更新编译执行
注意：
- 响应式是Vue中非常重要的机制，请仔细钻研

1.5 双向数据绑定原理

1. 事件声明没有小括号()，第一个形参就是事件对象
2. 事件驱动中可以直接使用event,其也是事件对象

简易原理

e.target是当前触发事件所在的DOM对象

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

<div id="app">
  <p>{{city}}</p>
  <p><input type="text" @input="input"></p>
</div>


<script src="./vue.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      city: '北京',
    },
    methods: {
      input(e) {
        console.log(e);
        this.city = e.target.value;
      }
    }
  })
</script>

</body>
</html>

itxcr

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue从入门到精通(一)

1.1 Vue简单使用目标元素内容区域元素属性元素绑定事件v-model双向数据绑定遍历指令步骤创建div容器引入vue.js文件实例化对象注意：Vue需要有目标操作容器，可以是div、p、span等等许多标签，一般推荐用div{{}}等vue的内容要放到div容器里{{}}双花括号是vue的语法el、data是vue内部固定的标志名称data内部...
复制链接

扫一扫