vue 基础用法

简介

vue: 一套用于构建用户界面的渐进式框架。

如何渐进

clipboard.png
可理解为分别对应:

  1. 非常简单的页面
  2. 比较大点的页面
  3. SPA(单页面应用)
  4. 数据管理 vuex
  5. 脚手架 vue-cli

单页应用

  • 定义:

页 -> HTML,所以 单页 -> 只有一个HTML 文件

  • 特点
  1. 页面中的交互是不刷新页面的
  2. 加载过的公共资源,无需重复加载(除了首页之外的页面,都通过异步组件方式注册)

特点

  1. 易用:会HTML,css,js即可上手。
  2. 灵活:不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩。
  3. 高效:20kb min+gzip运行大小,超快虚拟DOM,最省心的优化。

简单使用

// 引入cdn
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<div id="app">
    {{ a }}
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            a: 10,
        }
    })
</script>
 

语法

v-bind 和 v-on

  • v-bind 绑定属性
v-bind == :
// 完整语法
<a v-bind:href="url">...</a>
// 缩写
<a :href="url">...</a>
 
  • v-on 事件监听
v-on == @
// 完整语法
<a v-on:click="doSomething">...</a>
// 缩写
<a @click="doSomething">...</a>
 
<div id="app">
    <img :src='imgUrl' />
    <button @:click='clickBtn()'></button>
</div>

<script>
    data(){
        return {
            imgUrl: '...',
        }
    } ,
    methods: {
        clickBtn(){
            // to do...
        }
    }
</script>
 

绑定class、style

  • class 绑定
:class='[redClass,blueClass,...]';

:class='{redClass: true,blueClass: false,...}';

:class='[{redClass: true},blueClass]';
 
  • style 绑定
:style="{width: widthClass,border: '1px solid red'}";

:style="[{width: widthClass},imgStyle]"
 

v-if 和 v-show

  • 条件渲染:控制元素的显示与隐藏

注:如果不想要 div,v-if可以用 template;v-show则不能使用

  • 区别
  1. v-if 控制的 dom 的移除/添加。
  2. v-show 控制 dom 的样式显示/隐藏( display )
  3. 频换的切换显示/隐藏 使用 v-show;只判断一次时,使用 v-if

v-for

  • 列表渲染:基于一个数组来渲染一个列表

key 类型:number、string;唯一的;作用:可提高页面性能

arr: (item,index) in arr

<ul>
    <li v-for="item in arr">{{ item }}</li>
    
    // index 数组的索引
    <li v-for="(item,index) in arr">{{ item }} -- {{ index }}</li>
</ul>
 
obj: (value,key,index) in obj

<ul>
    <li v-for="value in obj">{{ value }}</li>
    
    // value 属性名,key 属性值,index 索引
    <li v-for="(value,key,index) in obj">{{ value }} -- {{ key }} -- {{ index }}</li>
</ul>
 
num: num in number

<p v-for="item in 10">{{ item }}</p> // 1 ... 10
 
str: str in string

<p v-for="str in 'fuj'">{{ str }}</p> // f u j
 

v-model

  • 双向数据绑定:数据驱动视图,视图驱动数据

注:v-model 实际上就是 :value + @input 的语法糖。

// 视图驱动数据:改变视图中input的数据,使得p中的数据随之改变
<div id="app">
    <input type="text" :value="value" @input='handleInput' />
    <p>{{ value }}</p>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            value: 'fj', // 数据驱动视图:数据在视图中显示
        },
        methods: {
            handleInput(e) {
                this.value = e.target.value;
            }
        }
    })
</script>
 
// checked: true/false
<input type="checkbox" v-model='checked' />

// checkList: [html,css]
<input type="checkbox" value="html" v-model="checkList" />
<input type="checkbox" value="css" v-model="checkList" />

// radioStr: 'html'/'css'
<input type="radio" value='html' v-model='radioStr' />
<input type="radio" value='css' v-model='radioStr' />

// selected: 'html'/'css'
<select v-model="selected">
    <option value="html">html</option>
    <option value="css">css</option>
</select>
 

计算属性watch 和 侦听器computed

vue中数据查找顺序:data、methods、computed

  • methods:写一些逻辑的时候,触发一个事件的时候;函数封装的时候
  • computed: 要得到一个新的数据的时候
  • watch:当在某个数据改变要做某个事情的时候

生命周期

  1. beforeCreate:组件实例化之前执行的函数(可写一些加载的效果)
  2. created:组件实例化完毕,但页面还未显示(一般在这里面写请求到的数据)监听data中数据。
  3. beforeMount:组件挂载前,页面仍未显示,但虚拟DOM已经配置了
  4. mounted:组件挂载后,此方法执行后,页面显示。监听页面DOM渲染完毕。
  5. beforeUpdate:组件更新前,页面仍未更新,但虚拟DOM已经配置
  6. updated:组件更新,此方法执行,页面显示更新后的。监听methods中方法执行后对DOM的改变
  7. beforeDestory:组件销毁前
  8. destoryed:组件销毁

第一次页面加载会触发的钩子:beforeCreate,created,beforeMount,mounted

请求数据 axios

  • 局部使用
  • 全局使用

脚手架 vue-cli

脚手架:自动的构建一个项目、使用 ES6 语法、打包和压缩 js 为一个文件、项目文件在环境中编译而不是浏览器…

clipboard.png

其他

ref

  1. ref:DOM对象的引用是该对象,组件的引用是组件的实例对象;
  2. ref 同名时,后添加的会覆盖前面的,引用指向的最后一个元素;
  3. 在 v-for 时添加引用,引用的值类型时数组,数组里面一个个的dom对象/组件实例对象。

$nextTick

框架和库的区别

  • 库:将代码集合成一个 产品,供开发者去使用,开发者去调用库中的方法去实现自己的功能。(控制权在自己手里,想用库就用不想用就用原生)

例子:jQuery、zepto…

  • 框架:为了解决一类问题而开发出来的产品,基于自身的特点向用户提供一套完整的解决方案。(控制权在框架手里,里面的规则方法要遵守)

例子:vue、react…

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14703.html

发表评论

登录后才能评论