【Vue学习笔记】二、vue基础入门

最新推荐文章于 2024-09-15 23:59:26 发布

Quindrich

最新推荐文章于 2024-09-15 23:59:26 发布

阅读量651

点赞数

文章标签：前端 vue.js 学习

本文链接：https://blog.csdn.net/Quindrich/article/details/123620908

版权

本文介绍了Vue的基础入门知识，包括Vue的特性、MVVM原理、基本使用步骤、指令与过滤器详解、监听器的使用以及计算属性。重点讲述了内容渲染、属性绑定、事件绑定、双向数据绑定和条件渲染指令，还提到了Vue CLI在单页面程序开发中的应用。

摘要由CSDN通过智能技术生成

二、vue基础入门

1）vue的特性

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

数据驱动视图

在使用了vue的页面中，vue会监听数据的变化，从而自动重新渲染页面的结构，示意图如下：

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

双向数据绑定

在网页中，form表单负责采集数据，Ajax负责提交数据

在vue中，在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0zoguZ33-1647780094335)(https://s2.loli.net/2022/03/20/ex3WudHXcsmo1CJ.png)]

好处：不用手动操作DOM来获取表单元素最新的值

2）MVVM

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理，MVVM指的是Model、View和ViewModel，它把每个HTML页面都拆分成了三个部分

ViewModel作为MVVM的核心，是它把当前页面的**数据源(Model)和页面的结构(View)**连接在了一起

3）vue的基本使用

1.基本使用步骤

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

<body>
    <!-- 希望vue能够控制下面的这个div，帮我们把数据填充到div内部 -->
    <!-- 固定语法双花括号表示要渲染的数据 -->
    <div id="app">{{  username }}</div>
    <!-- 1.导入Vue的库文件 -->
    <script src="./lib/vue.js"></script>
    <!-- 2.创建Vue实例 -->
    <script>
        //创建vue的实例对象
        const vm = new Vue({
            //el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            el: '#app',
            //data对象就是要渲染到页面上的数据
            data: {
                username: 'zhangsan'
            }
        })
    </script>
</body>

4）Vue的指令与过滤器

1.指令的概念

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

指令分为6大类：

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

2.内容渲染指令

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

v-text
{{}}
v-html

v-text

用法示例：

<div id="app">
    <!-- 把username的值渲染到p标签中 -->
    <p v-text="username"></p>
    <!-- 把gender的值渲染到p标签中，覆盖掉“性别” -->
    <p v-text="gender">性别</p>
 </div>

v-text指令的缺点：会覆盖掉元素内部的内容

{{ }}语法

这种语法的专业名称是插值表达式

<div id="app">
    <!-- 使用{{}}插值表达式，将对应的值渲染到元素的内容节点中 -->
    <!-- 同时奥六元素自身的默认值 -->
    <p>姓名：{{username}}</p>
    <p>性别：{{gender}}</p>
</div>

插值表达式在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容

v-html指令

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

data:{
    info:'<h4 style="color:red;font-weight:bold">信息</h4>'
}

<div id="app">
    <div v-html="info"></div>
</div>

3.属性绑定指令

插值表达式不能用在属性节点

const vm = new Vue({
            el: '#app',
            data: {
                tips:'请输入用户名'
            }
        })

<!-- 错误示范，会报错 -->
<div id="app">
	<input type="text" placeholder="{{tips}}">
</div>

如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令

用法：v-bind:需要绑定的属性="属性"

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

vue规定，v-bind可以简写为:

<div id="app">
    <input type="text" :placeholder="tips">
</div>

4.使用Javascript表达式

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

{{ number + 1 }}

{{ ok ? 'YES' : 'NO'}}

{{ message.split(''}.reverse().join('') }

 <div :id="'list-' + id"></div>

5.事件绑定指令

v-on

vue提供了v-on事件绑定指令，用来辅助成需要为DOM元素绑定事件监听

<div id="app">
    <p>count 的值是：{{ count }}</p>
    <button v-on:click="add">+1</button>
</div>

事件处理函数定义在vue构造函数的methods里

//完整写法
methods:{
    add:function() {
    }
}
//简写写法，去掉冒号和function
methods:{
    add() {
    }
}

通过this访问数据源中的数据

methods:{
    add() {
        this.count+=1;
    }
}

绑定事件并传参

为了让方法更加通用，可以设定参数，在绑定事件的同时用()就可以直接传参

methods:{
    add(n) {
        this.count+=n;
    }
}

<div id="app">
    <p>count 的值是：{{ count }}</p>
    <button v-on:click="add(2)">+1</button>
</div>

v-on指令可以被简写为@

<div id="app">
    <p>count 的值是：{{ count }}</p>
    <button @click="add(2)">+1</button>
</div>

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

6.事件绑定 $event

使用v-on绑定事件的时候，不传参也会默认传递一个事件对象event，可以根据event来操作DOM

methods:{
    add(e) {
        e.target.style.backgroundColor = 'red'
    }
}

如果传递了参数，事件对象会被覆盖掉，此时可以使用vue提供的内置变量，名字叫做$event，它就是原生DOM的事件对象e

在绑定事件时把$event作为参数传递

<div id="app">
    <p>count 的值是：{{ count }}</p>
    <button @click="add(2, $event)">+1</button>
</div>

methods:{
    add(n,e) {
        e.target.style.backgroundColor = 'red'
    }
}

7.事件修饰符

原生阻止默认行为需要操作事件对象e.preventDefault()，在vue中，可以在绑定v-on时增加.prevent，即可完成阻止默认事件的操作

<div id = "app">
    <a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>
</div>

常用的5个事件修饰符如下

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

8.按键修饰符

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

<div id="app">
    <!-- 只有在'key'是'Enter‘时调用'vm.submit()' -->
    <input @keyup.enter="submit">

    <!-- 只有在'key'是'Esc‘时调用'vm.cleanInput()' -->
    <input @keyup.esc="cleanInput">
</div>

9.双向绑定指令`v-model`

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

    <div id="app">
        <p>用户名是：{{ username }}</p>
        <input type="text" v-model="username" />

        <p>选中的省份是：{{ province }}</p>
        <select v-model="province">
            <option value="">请选择</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">深圳</option>
        </select>
    </div>

只有表单元素才可使用v-model

input输入框
- type=“radio”
- type=“checkboc”
- type=“xxxx”
textarea
select

10.`v-model`的修饰符

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

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

11.条件渲染指令

条件渲染指令用来辅助开发者按需控制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-if是动态地移除或创建元素，而v-show是修改style='display:none;'，如果需要频繁地修改，v-show的性能更好，如果默认不需要被展示，而且后期也很可能不需要被展示出来v-if的性能会更好

实际开发中，绝大多数情况不需要考虑性能问题，直接使用v-if就好了

11.`v-if`配套的指令

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指令一起使用，否则它将不会被识别

12.列表渲染指令

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

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

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

<div id="app">
    <ul>
        <li v-for="item in list">姓名是：{{item.name}}</li>
    </ul>
</div>

v-for中的索引

v-for指令还支持一个可选的第二个参数，即当前项的索引，语法格式为(item, index) in times

<div id="app">
    <ul>
        <li v-for="(item, index) in list">索引是：{{ index }}姓名是：{{item.name}}</li>
    </ul>
</div>

官方建议：只要用到了v-for指令，那么一定要绑定一个:key属性，而且，尽量把id作为key的值

官方对key的值类型，是有要求的：字符串或数字类型

key值是千万不能重复的，否则会报错

<div id="app">
    <ul>
        <li v-for="(item, index) in list" :key="item.id">
            索引是：{{ index }}姓名是：{{item.name}}
        </li>
    </ul>
</div>

13.过滤器

过滤器在vue3已经被删除，只需了解即可！

在vue3中，官方建议使用计算属性或方法代替被剔除的过滤器功能

过滤器(Filters)是vue为开发者提供的功能，常用于文本的格式化，过滤器可以用在两个地方：插值表达式和v-bind属性绑定

其中|叫做管道符

<!--调用了capitalize过滤器，来对message的首字母大写 -->
<p>{{ message | capitalize}}</p>

<!--调用了formatId过滤器，来对rawID操作 -->
<div :id="rawId | formatId"></div>

过滤器函数，必须被定义到filters节点之下

过滤器本质上是函数

filters:{
    //过滤器函数形参中的val永远都是管道符前面的值
    capitalize(val){
        //过滤器中，一定要有返回值
        const first = val.charAt(0).toUpperCase()
        //slice方法截取字符串，从指定索引往后截取
        const other = val.slice(1)
        return first + other;
    }
}

私有过滤器和全局过滤器

定义在filters里的是私有过滤器，只能在当前vue构造函数里el:指定的代码块中有效

在如果需要在多个vue实例之间共享过滤器，则可以按照如下格式定义全局过滤器：

过滤器可以串联使用

<p>{{ message | filter1 | filter2 | filter3}}</p>

过滤器本质是js函数，因此可以接收参数

<p>{{ message | filter1(arg1,arg2)}}</p>

Vue.filter('filterA',(msg,arg1,arg2)) => { //第一个位置定死了，一定是管道符前面的
    
}

5）侦听器

1.什么是watch侦听器

watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作

侦听器本质就是函数，要监听哪个数据的变化，就把数据名作为方法名即可

语法结构如下：

const vm = new Vue({
    el:'#app',
    data: { username:'' },
    watch: {
        //监听username值的变化
        //newVal是“变化后的新值”，oldVal是“变化之前的旧值”
        username(newVal, oldVal){
            console.log(newVal,oldVal)
        }
    }
})

2.侦听器的格式

方法格式的侦听器
- 缺点1：无法在刚进入页面的时候自动触发
- 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器
对象格式的侦听器
- 好处1：可以通过immediate选项，让侦听器自动触发
- 好处2：可以通过deep选项，让侦听器深度监听对象中每个属性的变化

watch:{
    //定义对象格式的侦听器
    username:{
        //侦听器的处理函数
        handler(newVal,oldVal){
            
        },
        immediate: true, //打开页面立即触发一次
        deep: true, //开启深度监听，对象中任何一个属性变化都会触发“对象的侦听器”
            
    }
}

要实现需求，先使用简单的方法，解决不了再考虑复杂的方法，优先使用方法格式的侦听器

侦听对象的属性的变化

如果要侦听对象里面的属性，必须外层包裹一层单引号

data:{
    info: {
        username: 'admin'
    }
}

watch:{
    'info.username'(newVal){
        console.log(newVal)
    }
}

3.案例：判断用户名是否被占用

监听username值的变化，并使用axios发起Ajax请求，检测当前输入的用户名是否可用：

watch: {
    //监听username值的变化
    //newVal是“变化后的新值”，oldVal是“变化之前的旧值”
    async username(newVal){
        if(newVal === '') return
        //使用axios发起请求，判断用户名是否可用
        cosnt{ data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
        console.log(res)
    }

6）计算属性

计算属性指的是通过一系列运算之后，最终得到一个属性值

这个动态计算出来的属性值可以被模板结构或methods方法使用，示例代码如下

const vm = new Vue({
    el: '#app',
    data: {
		r: 0, g: 0, b:0
    },
    computed: {
        rgb(){ return `rgb(${this.r}, ${this.g}, ${this.b})`}
    },
    methods: {
        show(){
            console.log(this.rgb)
        }
    }
})

特点：

定义的时候要定义为方法
当作普通的属性使用即可

好处：

实现了代码的复用
只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值

7）单页面程序

1.什么是单页面程序

单页面程序（Single Page Application)简称SPA，顾名思义，指的是一个Web网站中只有唯一的一个HTML页面，所有的功能与交互都在这唯一的一个页面内完成

2.什么vue-cli

vue-cli是Vue.js开发的标准工具，它简化了基于webpack创建工程化的Vue项目的过程

vue-cli是npm上的一个全局包

npm install -g @vue/cli

基于vue-cli快速生成工程化的Vue项目：

vue create 项目的名称

3.vue项目中src目录的构成

assest 文件夹：存放项目中用到的静态资源文件，例如：css样式表、图片资源
components 文件夹：程序员封装的、可复用的组件
main.js 是项目的入口文件，整个项目的运行，要先执行main.js
App.vue是项目的根组件

4.vue项目的运行流程

在工程化的项目中，vue要做的事情非常简单：通过main.js把App.vue渲染到index.html里去

其中

App.vue用来编写待渲染的模板结构
index.html中需要预留一个el区域
main.js把App.vue渲染到了index.html所预留的区域中

main.js中的.$mount(#app)与el属性是等价的

new Vue({
  render: h => h(App),
}).$mount('#app') //等于el: '#app'

Quindrich

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

【Vue学习笔记】二、vue基础入门

【Vue学习笔记】二、vue基础入门

二、vue基础入门

1）vue的特性

2）MVVM

3）vue的基本使用

1.基本使用步骤

4）Vue的指令与过滤器

1.指令的概念

2.内容渲染指令

3.属性绑定指令

4.使用Javascript表达式

5.事件绑定指令

6.事件绑定 $event

7.事件修饰符

8.按键修饰符

9.双向绑定指令v-model

10.v-model的修饰符

11.条件渲染指令

11.v-if配套的指令

12.列表渲染指令

13.过滤器

5）侦听器

1.什么是watch侦听器

2.侦听器的格式

3.案例：判断用户名是否被占用

6）计算属性

7）单页面程序

1.什么是单页面程序

2.什么vue-cli

3.vue项目中src目录的构成

4.vue项目的运行流程

9.双向绑定指令`v-model`

10.`v-model`的修饰符

11.`v-if`配套的指令