vue基本使用1

1.什么是vue

官方给出的概念:Vue(读音/vju:/，类似于view)是一套用于构建用户界面的前端框架。
在这里插入图片描述

构建用户界面
- 用vue往html页面中填充数据，非常方便
框架
- 框架是一套现成的解决方案，程序员只能遵循框架的规范，去编写自己的业务功能
- 要学习vue，就是在学习vue框架中规定的用法
- vue的指令、组件(是对UI结构的复用)、路由、vuex、vue组件库

2.vue的特性

vue框架的特性,主要体现在如下两方面:

数据驱动视图
双向数据绑定

2.1 数据驱动视图

在使用了vue的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下;
在这里插入图片描述

好处:当页面数据发生变化时，页面会自动重新渲染

注意:数据驱动视图是单向的数据绑定。

2.2 双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中。示意图如下:
在这里插入图片描述

好处:开发者不再需要手动操作DOM元素，来获取表单元素最新的值!

在网页中，form表单负责采集数据，Ajax负责提交数据。
js 数据的变化，会被自动渲染到页面上
页面上表单采集的数据发生变化的时候，会被vue自动获取到。并更新到js数据中

2.3.MVVM

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model、View和ViewModel,它把每个HTML页面都拆分成了这三个部分，如图所示:
在这里插入图片描述

在MVVM概念中:

Model表示当前页面渲染时所依赖的数据源。
View表示当前页面所渲染的DOM结构。
ViewModel表示 vue 的实例，它是MVM的核心。

2.4MVVM的工作原理

ViewModel作为MWVM的核心，是它把当前页面的数据源（Model)和页面的结构（View）连接在了一起。
在这里插入图片描述

当数据源发生变化时，会被ViewModel监听到，VM会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到 Model数据源中

注意:数据驱动视图和双向数据绑定的底层原理是MM(Mode数据源、View视图、ViewModel就是vue的实例)

vue的基本使用

1.基本使用步骤

导入vue.js 的script脚本文件
在页面中声明一个将要被vue所控制的DOM区域
创建vm 实例对象(vue 实例对象)

<body>

<div id="app">
  {{username}}
div>
body>

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

<script>
  //创建Vue的实例对象
  const vm = new Vue({
    //el属性是固定的写法 表示当前vm实例要控制页面上的那个区域 接收的值是一个选择器
    el: '#app',
    //data对象就是要渲染到页面上的数据
    data: {
      username: 'zhangsan',
    }
  })
script>

2.基本代码与MVVM的对应关系

在这里插入图片描述

vue的调试工具

1.安装vue-devtools调试工具

vue官方提供的vue-devtools调试工具，能够方便开发者对vue项目进行调试与开发。
Chrome浏览器在线安装vue-devtools :
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
FireFox浏览器在线安装vue-devtools :
https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/

2.配置Chrome浏览器中的vue-devtools

点击Chrome浏览器右上角的目按钮，选择更多工具->扩展程序->Vue.js devtools详细信息，并勾选如下的两个选项:
在这里插入图片描述

注意:修改完配置项，须重启浏览器才能生效!

3.使用vue-devtools调试vue页面

在这里插入图片描述

vue 的指令与过滤器

1.指令的概念

指令(Directives)是 vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

vue中的指令按照不同的用途可以分为如下6大类:

内容渲染指令
属性绑定指令
事件绑定指令
双向绑定指令
条件渲染指令
列表渲染指令

1.1内容渲染指令

内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3个:

v-text
{{}}
v-html

1.1.1 v-text

用法示例：


<p v-text="username">p>



<p v-text="gender">
    性别
p>

1.1.2{{}}语法

vue提供的语法，专门用来解决v-text 会覆盖默认文本内容的问题。这种{{f}}语法的专业名称是插值表达式（英文为:Mustache)。

{}}插值表达式，将对应的值渲染到元素的内容中-->

<p>
    姓名:{{username}}
p>
<p>
    性别:{{gender}}
p>

1.1.3 v-html

v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素,则需要用到v-html这个指令:



<p v-html='disciption'>
    
p>

1.2属性绑定指令

注意：插值表达式只能在元素的内容节点中，不能在元素的属性节点

如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令，可以简写为英文的:。用法示例如下:

<div id="app">
  <input type="text" v-bind:placeholder="tips">
  <hr>

  <img :src="photo" alt="" srcset="" style="width: 150px">
div>

1.2.1 使用Javascript表达式

在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持Javascript 表达式的运算，例如:

{{numder+1}}
{{ok?'yes':'no'}}
{{message.split('').reverse().join('')}}
<div v-bind:id="'list-'+id">div>

在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号

1.3事件绑定指令

vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。语法格式如下:

<h3>count的值为:{{count}}h3>

<button v-on:click="addCount">
    1
button>

注意:原生DOM对象有onclick、oninput、onkeyup等原生事件，替换为vue的事件绑定形式后，分别为:v-on:click、v-on:input、v-on:keyup

1.3.1事件修饰符

在事件处理函数中调用event.preventDefault()或 event.stopPropagation()是非常常见的需求。因此，vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的5个事件修饰符如下:

事件修饰符	说明
.prevent	阻止默认行为(阻止a链接的跳转、阻止表单的提交等)
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发1次
.self	只有在event.target是当前元素自身时触发事件处理函数

1.3.2 按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如:


<input @keyup.enter="submit">

<input @keyup.esc="clearInput">

1.4 双向绑定指令

vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。

<p>用户名是:{{uscrname}}p>
<input type="text" v-model="username"/>
<p>选中的省份是: {{province}}P>
<select v-model="province">
<option value="">请选择option>
<option valuc="1">北京option>
<option valuc="2">河北option>
<coption valuc="3">黑龙江option>
select>

v-model指令适用

input输入框
- type=“radio”
- type=“checkbox”
- type=“xxx”
textarea
select

1.4.1v-model指令的修饰符

为了方便对用户输入的内容进行处理，vue 为v-model指令提供了3个修饰符，分别是:

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型

示例用法如下:

<input type="text" v-model.number="n1">
<input type="text" v-model.number="n2">
<spen>{{n1*n2}}spen>

1.5条件渲染指令

条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。条件渲染指令有如下两个，分别是:

v-if
v-show

示例用法如下：

<div id="app">
    <p v-if="networkState === 200">
        请求成功---被v-if拉制    
    p>
    <p v-show="networkState === 200">
        请求成功---被v-show 控制
    p>
div>

v-show的原理是：动态元素添加或移除display:none样式，来实现元素的显示和隐藏
- 如果要频繁的切换元素的显示状态，用v-show性能会更好
v-if的原理是:每次动态创建或移除元素，实现元素的显示和隐藏
- 如果刚要进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时v-if性能更好

1.5.1 v-else-if

v-else-if 指令，顾名思义，充当v-if 的“else-if 块”，可以连续使用:

<div v-if="type==='A'">
    优秀
div>
<div v-else-if="type==='B'">
    良好
div>
<div v-else-if="type==='C'">
    一般
div>
<div v-else>
    差
div>

注意: v-else-if 指令必须配合v-if 指令一起使用，否则它将不会被识别!

1.5.2v-else

v-if 可以单独使用,或配合v-else指令一起使用:

<div v-if="Math.random()>0.5">
    随机数大于0.5
div>
<div v-else>
    随机数小于0.5
div>

注意:v-else指令必须配合v-if指令一起使用，否则它将不会被识别!

1.6 列表渲染指令

vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用item in items形式的特殊语法，其中:

items是待循环的数组
item是被循环的每一项

data:{
	list:[
	{id:1,name:'zs'},
	{id:2,name:'ls'}
	]
}
//_________________________
<ul>
    <li v-for="item in list">姓名是:{{item.name}}li>
ul>

1.6.1 v-for中的索引

v-for指令还支持一个可选的第二个参数，即当前项的索引。语法格式为(item, index) in items，示例代码如下;

data:{
	list:[
	{id:1,name:'zs'},
	{id:2,name:'ls'}
	]
}
//_________________________

    索引是:{{index}},姓名是:{{item.name}}

注意:v-for指令中的 item项和 index索引都是形参，可以根据需要进行重命名。例如(user, i) in userlist

1.6.2 key的注意项

key的值只能是字符串或数字类型
key 的值必须具有唯一性（即: key 的值不能重复)
建议把数据项id属性的值作为key的值（因为 id属性的值具有唯一性)
使用index的值当作 key 的值没有任何意义（因为index的值不具有唯一性)
建议使用v-for指令时一定要指定key 的值（既提升性能、又防止列表状态紊乱)

品牌列表案例

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <link rel="stylesheet" href="./lib/bootstrap.css">
  <link rel="stylesheet" href="./css/brandlist.css">
head>
<body>
<div id="app">
  
  <div class="card">
    <div class="card-header">
      添加品牌
    div>
    <div class="card-body">
      
      
      <form @submit.prevent="add">
        <div class="form-row align-items-center">
          <div class="col-auto">
            <div class="input-group mb-2">
              <div class="input-group-prepend">
                <div class="input-group-text">品牌名称div>
              div>
              <input type="text" class="form-control" placeholder="请输入品牌名称" v-model.trim="brand">
            div>
          div>
          <div class="col-auto">
            <button type="submit" class="btn btn-primary mb-2">添加button>
          div>
        div>
      form>
    div>
  div>

  
  <table class="table table-bordered table-hover table-striped">
    <thead>
    <tr>
      <th scope="col">#th>
      <th scope="col">品牌名称th>
      <th scope="col">状态th>
      <th scope="col">创建时间th>
      <th scope="col">操作th>
    tr>
    thead>
    <tbody>
    <tr v-for="item in list" :key="item.id">
      <td>{{item.id}}td>
      <td>{{item.name}}td>
      <td>
        <div class="custom-control custom-switch">
          <input type="checkbox" class="custom-control-input" :id="'cd'+item.id" v-model="item.status">
          <label class="custom-control-label" :for="'cd'+item.id" v-if="item.status">已起用label>
          <label class="custom-control-label" :for="'cd'+item.id" v-else>已禁用label>
        div>
      td>
      <td>{{item.time}}td>
      <td>
        <a href="javascript:;" @click="remove(item.id)">删除a>
      td>
    tr>
    tbody>
  table>
div>
body>
<script src="./lib/vue.js">script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      //用户输入的品牌名称
      brand: '',
      //是下一个 可用的id
      nextId:4,
      // 品牌的列表数据
      list: [
        {id: 1, name: '宝马', status: true, time: new Date()},
        {id: 2, name: '奔驰', status: false, time: new Date()},
        {id: 3, name: '迪奥', status: true, time: new Date()},
      ]
    },
    methods: {
      // 点击链接 删除对应的品牌
      remove(id) {
        this.list = this.list.filter(items => items.id !== id)
      },
      // 阻止表单的默认提交行为之后，触发add方法
      add() {
        //  如果判断到brand的值为空字符串,则return出去
        if (this.brand === '') return alert('必须填品牌名称');
      //  如果没被return 应该执行添加的逻辑
      //  先把要添加的品牌对象，整理出来
        const obj={
          id:this.nextId,
          name:this.brand,
          status:false,
          time:new Date()
        }
      //  往this.list数组中push品牌对象
        this.list.push(obj);
      //  清空this.brand 让this.nextId自增+1
        this.brand='';
        this.nextId+=1;
      }
    }
  });
script>
html>

brandlist.css

body {
  padding: 15px;
  user-select: none;
}

2.过滤器

过滤器（Filters)是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方:插值表达式和v-bind属性绑定。
过滤器应该被添加在JavaScript表达式的尾部，由“管道符”进行调用，示例代码如下:


<p>
    {{message|capitalist}}
p>

<div v-bind:id="rawId|formatId">
    
div>

2.1 定义过滤器

在创建 vue 实例期间，可以在 filters 节点中定义过滤器，示例代码如下：

const vm =new Vue({
    el:'#app',
    data:{
      message:'hello vue.js'
    },
    //过滤器函数，必须被定义到filters节点下
    //过滤器本质是函数
    filters:{
      //过滤器函数形参中val永远都是管道符前面的那个值
      capi(val){
      //  强调：过滤器中，一定要有一个返回值
      //   val.charAt(0) 字符串有charAt方法 这个方法接收索引 表示字符串中把索引对应的字符 获取出来
        const first=val.charAt(0).toUpperCase();
        // 字符串slicef方法 可以截取字符串 从指定索引开始
        const other=val.slice(1);
        //过滤器一定要有一个返回值
        return first+other;
      },
    }
  })

2.2 私有过滤器和全局过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器:

//全局过滤器–独立于每个vm实例之外 
// Vue.filter()方法接收两个参数;
//第1个参数，是全局过滤器的"名字“
//第2个参数，是全局过滤器的"处理函数”
Vue.filter ( 'capitalize', (str) => {
return str.charAt(O).toUpperCase() + str.slice(1) + "~~"
})

如果全局过滤器和私有过滤器名字一致，此时按照‘就近原则’ 调用的是私有过滤器

2.3 连续调用多个过滤器

过滤器可以串联地进行调用，例如:




    {{message | capitalize |maxLength}}
//全局过滤器–首字母大写
Vue.filter('capitalize', (str) =>{
	return str.charAt(0).toUpperCase() + str.slice(1) + '~~';
})
//全局过滤器–控制文本的最大长度
Vue.filter('maxLength', (str) =>{
	if(str.length <= 10) return str
     	return str.slice(0，11) + '...';
  })

2.4过滤器传参

过滤器的本质是JavaScript函数，因此可以接收参数，格式如下:


<p>
    {{message | filterA(arg1,arg2)}}
p>
//过滤器处理函数的形参列表中
//第一个参数，永远都是"管道符"前面待处理的值
//从第二个参数开始，才是调用过滤器传递过来的arg1和arg2参数
Vue.filter('filter',(msg,arg1,arg2)=>{
//过滤器的代码逻辑
})

2.5 过滤器的兼容性

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。在企业级项目开发中：

如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能

rCase() + str.slice(1) + ‘~~’;
})
//全局过滤器–控制文本的最大长度
Vue.filter(‘maxLength’, (str) =>{
if(str.length <= 10) return str
return str.slice(0，11) + ‘…’;
})


#### 2.4过滤器传参

过滤器的本质是JavaScript函数，因此可以接收参数，格式如下:

```html


    {{message | filterA(arg1,arg2)}}

//过滤器处理函数的形参列表中
//第一个参数，永远都是"管道符"前面待处理的值
//从第二个参数开始，才是调用过滤器传递过来的arg1和arg2参数
Vue.filter('filter',(msg,arg1,arg2)=>{
//过滤器的代码逻辑
})

2.5 过滤器的兼容性

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。在企业级项目开发中：

如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能

具体的迁移指南，请参考 vue 3.x 的官方文档给出的说明： https://v3.vuejs.org/guide/migration/filters.html#migration-strategy

相关阅读:
Java之HashMap和TreeMap
简易下载并使用Jupyter（Anaconda）
Html代替＜iframe＞标签的三种方法＜object＞, ＜embed＞和＜video＞
多线程Synchronized锁的使用与线程之间的通讯
 MPN – 制造零件号
 2019年Java面试题汇总
 使用SimPowerSystems并网光伏阵列研究（Simulink实现）
设备树——dtb格式到struct device node结构体的转换
 python责任链模式
 Python学习记录异常处理
原文地址：https://blog.csdn.net/weixin_46014553/article/details/126939467