当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue入门基础——第一次笔记

Vue入门基础——第一次笔记

2020年07月24日  | 移动技术网IT编程  | 我要评论

Vue基础部分1

1. Vue.js是什么？

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

特点：

易用：简化DOM操作
灵活
性能：响应式数据驱动
官网 :https://cn.vuejs.org

2. 第一个Vue程序

步骤：

1. 导入开发版本的Vue.js。

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

2. 创建Vue实例对象，设置el属性和data属性。

3. 使用简洁的模板语法把数据渲染到页面上。

<div id="app">
        {{ message }}
    </div>


 var app = new Vue({
            el: "#app",
            data: {
                    message: "adasd Vue!",
            }
        })

3. Vue基础介绍

el：挂载点

关联DOM元素中的id。意味着你接下来的所有改动都与el挂载的指定的DOM元素内。
Vue会管理el选项命中的元素及其内部的后代元素
可以选择其他的选择器，建议使用ID选择器。
可以使用其它的双标签，不能使用HTML和BODY

data：Vue实例的数据对象。键值对的形式呈现。

Vue 将会递归将 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。
Vue中用到的数据定义在data中
data中可以写复杂类型的数据

methods：用于定义函数，可以通过return来返回函数值。

4. Vue指令

1. 内容绑定，事件绑定

v-text：设置标签的文本值

 <div id="app">
        <h2 v-text="message+'!'">上海</h2>
        <h2 v-text="info+'!'">上海</h2>
        <h2>{{ message+'!'}}上海</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "你好",
                info: "2222222"
            }
        })
    </script>

默认写法会替换全部内容，如果使用差值表达式{{}}可以替换指定的内容。

v-html：设置标签的innerHTML

 <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                //content: "你好，上海！"
                content: '<a href="https://www.baidu.com">百度</a>'
            }
        })
    </script>

如果内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析成文本。

v-on：为元素绑定事件

<div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue ({
            el: "#app",
            data: {
            },
            methods: {
                doIt: function(p1,p2) {
                    console.log("做IT");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi: function () {
                    console.log("吃了吗");      
                }
            }
        })
    </script>

事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据。

v-on可以传递参数
.enter 可以限制触发的按键为回车
事件修饰符有很多种

2. 显示切换，属性绑定

v-show：根据表达值的真假，切换元素的显示和隐藏

<div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="累加年龄" @click="addAge">
        <img src="img/1.png" v-show='age >= 18'>
        <img src="img/1.png" v-show="isShow">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: true,
                age: 17
            },
            methods: {
                changeIsShow: function () {
                    this.isShow = !this.isShow;
                },
                addAge: function () {
                    this.age++;
                }
            }
        })
    </script>

原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
数据改变之后，对应元素的显示状态会同步更新。

v-if： 根据表达值的真假，切换元素的显示和隐藏（操作dom元素）

<div id="app">
        <input type="button" value="切换显示p" @click="changeIsShow">
        <p v-if="isShow">哈喽哈喽哈</p>
        <p v-show="isShow">哈喽哈喽哈</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false
            },
            methods: {
                changeIsShow: function () {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>

v-if的本质是通过操纵dom元素切换显示状态，表达式的值为true，元素存在于dom树中，为false，从dom树中移除。
如果是频繁的切换使用v-show，反之使用v-if。因为前者的切换消耗较小。

v-bind：设置元素的属性

v-bind：属性名=表达式 简写形式: :属性名=表达式 ，省略了前面的v-bind

<div id="app">
        <img v-bind:src="imgSrc">
        <br/>
        <img :src="imgSrc" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="triggleActive" >
        <br>
        <!-- 对象的方式加class -->
        <img :src="imgSrc" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="triggleActive" >
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue ({
            el: "#app",
            data: {
                imgSrc: "img/1.png",
                imgTitle: "刘海军",
                isActive: false,
            },
            methods: {
                triggleActive: function () {
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>

需要动态的增删class建议使用对象的方式

3. 列表循环，表单元素绑定

v-for：根据数据生成列表结构

<div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">{{ index + 1 }}liuhaijun{{ item + 1 }}</li>
        </ul>
        <h2 v-for="it in vegetables" v-bind:title="it.name">{{ it.name }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ['h','e','l','l','o'],
                vegetables: [
                    {name: "qwe"},
                    {name: "asd"}
                ]
            },
            methods: {
                add: function () {
                    this.vegetables.push({name : "sadasd"});
                },
                remove: function () {
                    this.vegetables.shift();
                }
            }
        })
    </script>

数组经常和v-for结合使用
语法：(item, index) in 数据
item，index可以结合其它指令一起使用
数组长度的更新会同步到页面上，是响应式的。

v-model：获取和设置表单元素的值（双向数据绑定）

<div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{ message }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue ({
            el: "#app",
            data: {
                message: "liuhaijun"
            },
            methods: {
                getM: function () {
                    alert(this.message);
                },
                setM: function () {
                    this.message = "asdasda";
                }
            }
        })
    </script>

作用：便捷 的设置和获取表单元素的值
绑定的数据会和表达元素值相关联

5. axios与Vue

Vue结合网络数据开发应用

 <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用方法：

axios.get(地址?查询字符串).then(function(response){},function(err){})
 axios.get(地址 ?key=value&key2=value2).then(function(response){},function(err){})

axios.post(地址,参数对象).then(function(response){},function(err){})
axios.post(地址 ,{key:value,key2:value2}).then(function(response){},function(err){})

注：
axios必须先导入才可以使用
使用get和post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容，错误信息

var app = new Vue ({
            el: "#app",
            data: {
                joke: "很好笑的笑话"
            },
            methods: {
                getJoke: function () {
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then
                    (function(response){
                        //console.log(response);
                        that.joke = response.data;
                    },function(err){})
                }
            }
        })

接着学习！！！

本文地址：https://blog.csdn.net/qq_41497756/article/details/107533817

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网