vue2.0基础入门

最新推荐文章于 2024-03-31 23:12:39 发布

键.

最新推荐文章于 2024-03-31 23:12:39 发布

阅读量1.2k

点赞数 1

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

本文链接：https://blog.csdn.net/beekim/article/details/121492646

版权

vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

VUE2.0

2.1入门

1 什么是vue？

构建用户界面
- 用vue往html页面中填充数据，非常方便
框架
- 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能
- 要学习vue，就是在学习vue框架中规定的用法
- vue的指令、组件（是对UI结构的复用）、路由、Vuex
- 只有上面罗列的内容掌握以后，才有开发vue项目的能力

2 vue特性

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

注意：这两个特性的底层原理是MVVM

2.1数据驱动视图

数据的变化会驱动视图自动更新
好处：程序员只管吧数据维护好，那么页面结构会被vue自动渲染出来
数据的变化总是单向的，由数据到页面

2.2 双向数据绑定

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

js数据的变化，会自动渲染到界面上
页面上表单菜鸡的数据发生变化的时候，会被vue自动获取到，并更新到js数据中

3 MVVM

2.2 基本使用

<html>
    <body>
        <!-- 希望Vue能够控制下面的这个div，帮我们在把数据填充到div内部 -->
        <div id="app">{{ msg }}</div>
        <!-- 1.CDN加载Vue库，在window全局就有了Vue这个构造函数 -->
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <!-- 2.创建Vue的实例对象 -->
        <script>    
            const vm=new Vue({
                //选项
                //el代表的是element元素，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
                el:'#app',
                //data对象时要渲染到页面上的数据
                data:{
                    msg:'学习vue' 
                },
                //方法
                methods:{

                }
            })
        </script>
    </body>
</html>

2.3 指令

1 内容渲染指令

v-text

{{}}

v-html

v-text

会覆盖原有的文本内容

{{}}

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

v-html

可以把带有标签的字符串，渲染成真正的HTML内容！

2 属性绑定指令

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

v-bind

vue中，可以使用v-bind:指令，为元素的属性动态绑定值；

简写是英文的:
在使用v-bind属性绑定期间，如果绑定内容需要进行动态绑定值，则字符串外面应该包裹单引号。

3 事件绑定指令

v-on

普通事件绑定

我们在data里面添加的变量会被添加进new Vue()实例化的对象vm里面，这里给标签添加v-on点击事件的指令后，也是相当于给new Vue()实例化的对象vm里面的值进行加减。而我们使用this就可以直接替代vm找个对象。

在绑定事件时可以加(),也可以不加。需要传参的时候就必须要加()。

v-on可以被简写为@

带参数的事件

如果在触发点击事件的时候没有传入参数，调用的函数会自动接收原生DOM的事件e

<button @click="fun">点击</button>

methods:{
    fun(e){
        console.log(e)
        e.target.style.backgroundColor='red'
    }
}

vue提供了内置变量，名字叫做$event,他就是原生DOM的事件e。

如果在传参的时候也需要将$event传入函数中，则需要像下面的格式写：

<button @click="fun(n,$event)">点击</button>

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

注意:

在传参的时候必须写成$event这种格式，但是这个参数在第几个位置是没有影响的。

事件修饰符

加在事件绑定上面，@click.stop

按键修饰符

4 双向绑定指令

指令操作

v-model

测试：数据双向和单向绑定

<p>{{username}}</p>
<input type="text" v-model="username"><br>
<input type="text" v-bind:value="username">

data:{
   username:'胡桃'
}

结果：

结果显示表明：

v-model是双向绑定，data里面的值改变的时候，界面上的值也会跟着改变。界面上的值改变的时候也会改变data的值。
v-bind是单向绑定，数据方向是从data层像视图层改变的。

可以使用v-model的表单元素：

input

type=“text”
type=“radio”
type=“checkbox”
type=“xxxx”

textarea

select

v-model修饰符

5 条件渲染指令

6 列表渲染指令

注意一点：如果在用脚手架创建的项目.vue使用到循环，但是不写key的话会报错。

2.4 过滤器

1 基本使用

案例：

<div id="app">{{ msg | capi }}</div>

const vm=new Vue({
    el:'#app',
    data:{
        msg:'learing vue' 
    },
    //方法
    methods:{

    },
    //过滤器函数
    filters:{
        capi(val){
            //val为管道符前面的值 
            //过滤器找那个，一定要有一个返回值
            return val.toUpperCase() 
        }
    }
})

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

私有过滤器：

全局过滤器：

<div id="app">{{ msg | capi }}</div>
<div id="app2">{{ msg | capi }}</div>

//全局过滤器
Vue.filter('capi',(val)=>{
    return val.toUpperCase()+'~~'
})  
const vm=new Vue({
    el:'#app',
    data:{
        msg:'learing vue' 
    },
    //过滤器函数
    filters:{
        capi(val){
            //val为管道符前面的值 
            //过滤器找那个，一定要有一个返回值
            return val.toUpperCase() 
        }
    }
})
const vm2=new Vue({
    el:'#app2',
    data:{
        msg:'learing vue' 
    },
})

3 注意

4 拓展

2.5 侦听器

1 基本使用

<div id="app">
    <input type="text" v-model="msg">
</div>

const vm=new Vue({
    el:'#app',
    //data对象时要渲染到页面上的数据
    data:{
        msg:'learing vue' 
    },
    watch:{
        //侦听器本质是一个函数，要监听哪个数据的变化，就把数据名作为方法名即可
        msg(newval,oldval){
            console.log('变化了',newval,oldval)
        }
    }
})

侦听器种类：

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

2 immediate

3 深度侦听

4 优化总结

使用函数格式侦听对象中具体的哪个值的变化，可以不使用深度侦听。

2.6 计算属性

案例：

*{margin: 0;padding: 0;}
.box{
    width: 300px;
    height: 300px;
}

<div id="app">
    R:<input type="text" v-model.number="R"><br>
    G:<input type="text" v-model.number="G"><br>
    B:<input type="text" v-model.number="B"><br>
    <hr>
    <p class="box" :style="{backgroundColor:rgb}">{{rgb}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>  
    const vm=new Vue({
        el:'#app',
        data:{
            R:0,
            G:0,
            B:0,
        },
        computed:{
            rgb(){
                return `rgb(${this.R},${this.G},${this.B})`
            }
        }
    })
</script>

效果：box盒子的颜色会根据你输入的值实时的改变

2.7 axios

1 基本使用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>  
    //1.调用axios方法得到的返回值是Promise对象
    const res=axios({
        method:'GET',
        url:'http://www.liulongbin.top:3006/api/getbooks'
    })

	console.log(res)
	res.then(function(books){
    console.log(books)//不是真实数据
    console.log(books.data)//是真实数据
	})
</script>

2 axios传参

发起GET请求：

axios({
    //请求方式
    method:'GET',
    //请求地址
    url:'http://www.liulongbin.top:3006/api/getbooks',
    //URL中的查询参数
    parms:{
        id:1
    }
}).then(function(books){
    console.log(books)
})

发起POST请求：

axios({
    //请求方式
    method:'GET',
    //请求地址
    url:'http://www.liulongbin.top:3006/api/getbooks',
    //URL中的查询参数
    parms:{
        id:1
    }
}).then(function(books){
    console.log(books)
})

3 axios结构赋值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-az824sWY-1637648980488)(C:%5CUsers%5Ccdd%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20211008101320259.png)]

可以得到真实的数据，

优化：

4 axios.get/post

2.8 vue-cli

1 单页面应用程序

2 vue-cli

3 安装使用

4 src组成

5 vue运行流程

6 main.js

这里的#app指的是要将模板templa里面的界面渲染到index.html里面的#app区域：

2.9 vue组件

1 组件化的开发

2 vue中的组件化开发

3 三个组成部分

4 基本使用

这里的data为什么是函数而不是对象呢？

vue中data必须是函数是为了保证组件的独立性和可复用性，data是一个函数，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，你实例化几次，就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。

简单来说就是：

如果data为一个对象，那么存的数据都是在同一个内存空间里面的，因为对象是引用类型，一个数据改变的时候，就会影响到其他的使用了该数据的效果。

data为一个函数的话，里面return的值就是在块级作用域里面的，{}里面的每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。

写函数的原因是因为保证了这个对象是独立的,如果可以保证你写的对象是唯一的,不会被别的地方引用到,也可以写对象不用谢函数

5 组件进阶

1 父子组件

2 使用组件的三个步骤

3 私有组件

4 全局组件

键.

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue2.0基础入门

VUE2.02.1入门1 什么是vue？构建用户界面用vue往html页面中填充数据，非常方便框架框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能要学习vue，就是在学习vue框架中规定的用法vue的指令、组件（是对UI结构的复用）、路由、Vuex只有上面罗列的内容掌握以后，才有开发vue项目的能力2 vue特性数据驱动视图双向数据绑定注意：这两个特性的底层原理是MVVM2.1数据驱动视图数据的变化会驱动视图自动更新好处：程序员
复制链接

扫一扫