Vue2基础笔记

快乐的野指针945

已于 2022-12-26 13:40:35 修改

阅读量118

点赞数 2

分类专栏： vue 文章标签： vue.js 前端

于 2022-12-26 13:39:28 首次发布

本文链接：https://blog.csdn.net/qq_68493787/article/details/128443351

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Hello 这里是Vue2基础笔记

故事的开始……

// 我们先导入vue2
 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

// 创建vue2实例
 new Vue({
            el: '.root', //指定当前vue 为哪个容器使用
            data: {
                name: '张三',
                age: 18
            }
        });
// el表示挂载实例
// 还有一种挂载实例的方法 在脚手架中常用
 const vm = new Vue({
            data: {
                name: '张三',
                age: 18
            }
        });
 vm.$mount('.root') //指定当前vue 为哪个容器使用

data 也有两种使用方法

// 除了上述
data(){
	return {
		
		}
}
// 这种方法在脚手架必用

以下是div中的内容

 <div class="root">
        <h1>hello {{name}}</h1>
        第一个{{age}}
 </div>
// 注意 在vue2中只允许一个 div 作为根节点

Vue指令

1.vue2的内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容

v-text v-text指令覆盖元素默认值
{{ }} vue 提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题
v-html v-html 指令和插值表达式只能渲染纯文本内容，可以把包含 HTML 标签的字符串渲染为页面的 HTML 元素

插值表达式：{{ }} 是最常用的

2. 属性绑定指令

v-bind v-bind可以简写为冒号 " : " 用于绑定div中的属性和data中的值

3.事件绑定指令

v-on v-on可以简写为 " @ " 用于绑定div中的事件 as: @click= ‘事件名’

在事件后面可以添加事件修饰符 as: .prevent 阻止默认行为 .stop 阻止事件冒泡

4.双向绑定指令

vue本就是数据驱动视图视图又反驱动数据

v-model 通过v-model Vue完成了数据和视图间的双向绑定其中 v-model用来绑定input文本框最为常见

5.条件渲染指令

v-if v-if通过销毁创建dom元素来控制元素
v-show v-show通过控制dom元素的display属性来控制元素

所以在页面有大量元素需要控制时我们使用v-show更加合适

6.列表渲染指令

v-for v-for用来遍历数组，对象 as: v-for=“(元素,索引) in 数组名” :key=‘索引’

主要是vue中使用虚拟Dom算法在列表渲染时会对已有标签进行复用

v-for中key属性的值应唯一，起到身份认证的作用 key还能提高渲染的性能

Vue计算属性

所有的计算属性都要放到computed 节点的下面

 new Vue({
            el: '.root', //指定当前vue 为哪个容器使用
            data: {
            },
            computed: {
            	add(a,b){
					return a + b
					}
            }
        });

计算属性就像一个方法一样一定要return 一个值，数组，对象 as:我们可以在其中过滤数组再在div中使用过滤后的数组

计算属性实现了代码的复用

请求接口

使用 axios 请求接口

<body>
    <button id="btnPost">点击发起get请求</button>
    <script>
        //axios 是一个专注于网络请求的库(艾克c奥斯)
        document.querySelector('#btnPost').addEventListener('click', async function () {
            const { data: res } = await axios({
                method: 'get',  //请求方式
                url: 'http://www.liulongbin.top:3006/api/getbooks', //请求地址
                // url查询参数(get传参用)
                params: {},
                //请求体参数（post传参用）
                data: {}
            })
            console.log(res.data);
        })

        //axios 在请求到数据后给数据套了一层壳
        //调用axios后使用 await 和 async 进行简化
        // 如果方法的返回值是promise 就在方法前加await 同时调用方法前加 async
        // 解构赋值 已经知道右侧有6个属性  可以在左侧 使用{属性名:新的名字} 接收特定的属性值
        //解构赋值可以重命名
    </script>
</body>

过滤器

过滤器实际在vue3中已经弃用我感觉平常用的也特别少

帧听器

在watch节点中侦听

watch是vue内部提供的一个用于侦听功能的更通用的方法，其用来响应数据的变化，通过特定的数据变化驱动一些操作。

就是侦听属性，响应数据（data&computed）的变化，当数据变化时，会立刻执行对应函数

 <div class="root">
        <input type="text" v-model="username">
    </div>
    <script>
        //创建vue实例
        new Vue({
            el: '.root', //指定当前vue 为哪个容器使用
            data: {
                username: "admin"
            },
            //在watch节点中侦听
            watch: {
                //监听的值作为方法名
                username(newVal, oldVal) {
                    //                     该侦听器不能进入网页直接触发
                    //1.调用jquery中的ajax发起请求 判断newVal是否被占用
                    //2. 如果newVal为空
                    if (newVal === '') {
                        return
                    }
                    $.get('https://www.escook.cn/api/finduser/' + newVal, function (res) {
                        console.log(res);
                    })
                },
                //---直接触发的监听器(对象格式)
                username: {
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal);
                    },
                    //控制侦听器是否自动触发（默认false）
                    immediate: true,
                    //开启深度监听
                    deep: true
                }
            }
        });

    </script>
    <script>
        //1. watch侦听器  监视事件的变化 从而作出其他操作(本质也是一个函数)
        //2. (新值,旧值)   要直接侦听就使用对象格式并把immediate改为true 对象也有handler属性
        //3. 如果监听对象 不会监听到对象里的属性值（这可以用deep深度监听）
        //4. deep:true 只要对象里的属性改变就会触发侦听器
        //5. 使用"对象.属性" 也可以深度监听   
    </script>
</body>