初识Vue

最新推荐文章于 2024-05-18 20:07:31 发布

秃头小宋s

最新推荐文章于 2024-05-18 20:07:31 发布

阅读量203

点赞数

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

本文链接：https://blog.youkuaiyun.com/m0_73634593/article/details/128449885

版权

Vue 专栏收录该内容

11 篇文章

订阅专栏

一、什么是Vue

1、前端技术的发展(HTML、CSS、JavaScript)

（1）jQuery：是对JavaScript进行了封装，使得操作DOM、事件处理、动画处理、ajax交互变得简洁方便。是JavaScript的库。

（2）Vue：通过虚拟的DOM来减少对真实DOM的操作，通过尽可能少的、简单的API实现数据的绑定。支持单向和双向的数据绑定

（3）Vue的基本概念：

1️⃣是一个渐进式框架：可以实现自底向上的逐层开发

2️⃣可以用Vue开发全新的项目，也可以在现有的项目中引入Vue

2、MVV架构

M：Model(模型)

V：View(视图)

V：ViewModel(视图模型) —— 实现数据的双向绑定

数据的双向绑定：Vue的特征之一，当视图发生改变时候，模型能立即感知到，当模型中的数据发生改变时，视图也能立即反应出来。

二、Vue开发的方式

1、基本方式：在页面中引入vue.js文件(vscode)

2、组件方式：利用Vue-cli（Vue脚手架）开发(vscode、WebStorm、Vue Gui)

3、创建Vue实例：new Vue({})

（1）el：表示与vue实例绑定的唯一的根标签，是通过标签的id或class属性进行绑定

（2）data：初始化vue实例的数据。在底层会自动生成属性的setter和getter方法

可以是用 vue对象名.$data.属性名 的方式来获取对象的属性值

（3）methods：用来定义方法。这些方法vue的实例可以直接访问

<div id="root">
        <p>{{ msg }}</p>
        <p>{{ info }}</p>
        <button @click="changeMsg">请点击</button>
</div>
<script>
    //创建vue实例
    const vm = new Vue({
        el:'#root',
        data:{  //定义数据
            msg:'Hello World~',
            info:'今天周一'
        },
        methods:{  //定义方法
            changeMsg(){
                this.msg = '西安'
            }
       }
    })
    console.log(vm.$data.info)
</script>

三、Vue的基本指令

1、插值表达式:{{ 变量名 }}，将Vue实例的对应的属性值在页面中显示出来

2、内置指令：vue的内置指令都是以 v- 开头的特殊属性，通过这些指令来操作属性的值

（1）v-show：可以根据表达式的值的真假，来决定是否显示数据

<div id="app">
        <p v-show="flag">西安</p>
        <p v-show="temp">陕西</p>
</div>
<script>
	const vm = new Vue({
            el: '#app',
            data: {
                flag: true,
                temp: false
            },
        })
        window.setInterval(function () {
            vm.flag = !vm.flag,
            vm.temp = !vm.temp
        }, 1000)
</script>

（2）v-html：插入标签

<div id="app">
        <h2>你喜欢的水果：</h2>
        <form action="">
            <label for="">
                <input type="checkbox">苹果
            </label>
            <label for="">
                <input type="checkbox">葡萄
            </label>
            <label for="">
                <input type="checkbox">香蕉
            </label>
            <label for="">
                <input type="checkbox">橙子
            </label>
            <label for="">
                <input type="checkbox" @click="show">其他
            </label>
            <br>
            <div v-html="htmlStr" v-show="flag"></div>
        </form>
</div>
<script>
        const vm = new Vue({
            el:'#app',
            data:{
                htmlStr:'<textarea></textarea>',
                flag:false
            },
            methods:{
                show(){
                    this.flag = !this.flag
                }
            }
        })
</script>

（3）v-text：在元素中插入值。作用和插值表达式{{ }}相同

<div id="app">
        <p v-text="test"></p>
        <p>{{ test }}</p>
</div>
<script>
        const vm = new Vue({
            el:'#app',
            data:{
                test:'西安'
            }
        })
</script>

（4）v-if 、 v-else、v-else-if：类似于if-else的功能

<div id="app">
        <div v-if="role==1">
            <h2>超级管理员</h2>
        </div>
        <div v-else-if="role==2">
            <h2>管理员</h2>
        </div>
        <div v-else>
            <h2>路人</h2>
        </div>
</div>
<script>
        const vm = new Vue({
            el:'#app',
            data:{
                role:3
            }
        })
</script>

注：v-show和v-if的区别：

1️⃣实现方式：v-if底层采用appendChild方式实现，v-show是通过对样式属性display来控制元素的显示和隐藏

2️⃣加载性能：v-if的加载速度更快，v-show的加载速度慢

3️⃣切换开销：v-if的开销大，v-show的开销小

v-if是条件渲染。将模型中的数据是在视图中显示出来的过程称为渲染

（5）v-for：循环指令

<div id="app">
        <ul>
            <li v-for="item in arr">
                {{ item }}
            </li>
        </ul>
        <ul>
            <!-- item：数组元素  index：下标 -->
            <li v-for="(item,index) in arr">  
                {{index}} === {{ item }}
            </li>
        </ul>
        <ul>
            <li v-for="(item,key,index) in obj">
                {{item}} --- {{key}} ---{{index}}
            </li>
        </ul>
        <ul>
            <li v-for="item in objArr">
                {{item}}
            </li>
        </ul>
        <ul>
            <li v-for="item in objArr">
                {{item.id}}
                {{item.name}}
                {{item.address}}
            </li>
        </ul>
</div>
<script>
        const vm = new Vue({
            el:'#app',
            data:{
                arr:[11,22,33,44,55,66], //普通数组
                obj:{id:001,name:'小王',address:'西安'},  //对象
                objArr:[
                    {id:'001',name:'小王',address:'西安'},
                    {id:'002',name:'小张',address:'西安'},
                    {id:'003',name:'小李',address:'西安'},
                    {id:'004',name:'小三',address:'西安'},
                    {id:'005',name:'小四',address:'西安'},
                ]
            }
        })
</script>

（6）v-bind：绑定元素的属性并执行相关的操作

<div id="app">
        <a v-bind:href="link">超链接</a>
        <br><br>
        <button @click="change">改变超链接</button>
</div>
<script>
        const vm = new Vue({
            el:'#app',
            data:{
                link:'http://www.bilibili.com'
            },
            methods:{
                change(){
                    this.link = 'http://www.baidu.com'
                }
            }
        })
</script>

（7）v-on：监听事件，并执行相应的操作

<div id="app">
        <p>{{msg}}</p>
        <button v-on:click="change">修改</button>
</div>
<script>
        const vm = new Vue({
            el:'#app',
            data:{
                msg:'钟楼'
            },
            methods:{
                change(){
                    this.msg = '大雁搭'
                }
            }
        })
</script>

注：v-on的简写方式(@事件名)

（8）v-model：把input的值和变量进行绑定，实现了数据和视图的双向绑定

<div id="app">
        <p>性别</p>
        <input type="radio" v-model="gender" name="sex" value="男">男
        <input type="radio" v-model="gender" name="sex" value="女">女
        <br>
        <p>你选择的是：{{gender}}</p>
        <hr>
        <p>地理分类</p>
        <select v-model="address">
            <optgroup label="华东地区">
                <option value="江苏">江苏</option>
                <option value="浙江">浙江</option>
                <option value="广东">广东</option>
            </optgroup>
            <optgroup label="西北地区">
                <option value="陕西">陕西</option>
                <option value="甘肃">甘肃</option>
                <option value="宁夏">宁夏</option>
            </optgroup>
        </select>
        <p>你选择的地区是：{{address}}</p>
        <hr>
        <p>兴趣爱好</p>
        <input type="checkbox" name="chk" value="打游戏" v-model="hobby">打游戏
        <input type="checkbox" name="chk" value="足球" v-model="hobby">足球
        <input type="checkbox" name="chk" value="看书" v-model="hobby">看书
        <input type="checkbox" name="chk" value="音乐" v-model="hobby">音乐
        <input type="checkbox" name="chk" value="羽毛球" v-model="hobby">羽毛球

        <p>你的兴趣爱好是：{{ hobby }}</p>
        <hr>
        <label for="">
            姓名: <input type="text" v-model="userName">
        </label>
        <br>
        <p>你的姓名是：{{ userName }}</p>
</div>
<script>
        const vm = new Vue({
            el:'#app',
            data:{
                gender:'',
                address:'',
                hobby:[],
                userName:''
            }
        })
</script>

（9）v-once：可以让元素或组件只渲染一次，一旦绑定，数据就不会改变

<div id="app">
        <h2>v-once示例</h2>
        <input type="text" v-model="onceValue">
        <p>{{ onceValue }}</p>
        <p v-once>{{ onceValue }}</p>
</div>
<script>
        const vm = new Vue({
            el:'#app',
            data:{
                onceValue:'v-once绑定'
            }
        })
</script>