首页 > 其他分享> > Vue框架基础——迈出第一步

Vue框架基础——迈出第一步

2021-04-02 16:33:04 作者：互联网

下载Vue框架

把Vue框架当作一个包使用，下载：
https://cn.vuejs.org/v2/guide/installation.html

在这里插入图片描述

直接导入外网上的Vue框架

导入网址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js （开发版）

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue框架的基本使用

导入Vue框架
给标签添加class或者id
在script内写入Vue语法

var app = new一个Vue对象（{
	el: '标签选择器',
	data: {
		key: value
	}
}）

html标签内{{ key }} jinja2语法替换value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function () {
            var app = new Vue({
                el: '.box',
                data: {
                    content: "Hello Vue!"
                }
            })
        }

    </script>
</head>
<body>
<div class="box">
    <div>{{ content }}</div>

</div>
</body>
</html>

测试

打印出value
在这里插入图片描述

Vue框架绑定元素的属性

避免与jinja2语法重复，可以把Vue框架替换value值的语法改一下

delimiters: 一个列表，参1为改左边的语法,参2为改右边的语法，以后替换就成为了 [[ key ]]

delimiters: ['[[', ']]']

v-bind:属性名=“Vue框架内的key” 可以给元素的属性赋值
可以简写为 :属性名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function () {
            var app = new Vue({
                el: '.box',
                delimiters: ['[[', ']]'],
                data: {
                    content: "Hello Vue!",
                    // 给url赋值
                    url: 'https://www.baidu.com/',
                    url2: 'https://www.sogou.com/',
                    link_data: '百度',
                    link_data2: '搜狗'
                }
            })
        }

    </script>
</head>
<body>
<div class="box">
    <div>[[ content ]]</div>
    <a v-bind:href="url" target="_blank">[[ link_data ]]</a>
    <!-- 简写给属性赋值 -->
    <a :href="url2">[[ link_data2 ]]</a>

</div>
</body>
</html>

测试
在这里插入图片描述

事件的使用

添加methods 放入事件函数
@click=“函数名” 绑定事件函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function () {
            var app = new Vue({
                el: '.box',
                delimiters: ['[[', ']]'],
                data: {
                	// 添加count变量测试点击
                    count: 0
                },
                // 添加methods 里面放入函数
                methods: {
                    clickFunc: function () {
                    	// this代表当前对象 app对象的count属性加等于1
                        this.count += 1;
                    }
                }
            })
        }

    </script>
</head>
<body>
<div class="box">
	<!-- @事件名=“框架内函数” -->
    <button @click="clickFunc">[[ count ]]</button>

</div>
</body>
</html>

测试
点击数字+1
在这里插入图片描述

if判断和for循环

if判断

v-if= “条件语句” 判断如果为true就显示元素
v-else-if= “条件语句”
v-else
v-show=“布尔值” 为true的话显示元素为false 元素的属性display: none;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function () {
            var app = new Vue({
                el: '.box',
                delimiters: ['[[', ']]'],
                data: {
                    flag: 2,
                    isshow: true,
                }
            })
        }

    </script>
</head>
<body>
<div class="box">
    <p v-if="flag==1">vif------</p>
    <p v-else-if="flag==2">velseif---abcd</p>
    <p v-else-if="flag==3">velseif---1234</p>
    <p v-else>else</p>
    <p v-if="isshow">heheheheh</p>
    <p v-show="isshow">hahahaha</p>

</div>
</body>
</html>

测试
在这里插入图片描述

for循环

v-for="循环语句 变量 in 数组"…[[ 变量 ]]…
(item,index) in 数组 index为下标 item为数组内值
item in 字典 只遍历字典的value
（obj,key）in 字典 obj为属性值，key为属性名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function () {
            var app = new Vue({
                el: '.box',
                delimiters: ['[[', ']]'],
                data: {
                	// 数组
                    itemList: [5, 4, 3, 2, 1],
                    indexList: ['a','b','c','d','e'],
                    // 字典
                    objData: {
                        name:'小明',
                        age:19
                    },
                    // 数组包含字典
                    objList:[
                        {
                            name:'小明',
                            age:20
                        },
                        {
                            name:'小红',
                            age:21
                        }
                    ]
                }
            })
        }

    </script>
</head>
<body>
<div class="box">
    <ul>
        <li v-for="item in itemList">[[ item ]]</li>
        <li v-for="(item,index) in indexList">角标[[ index ]]==数值[[ item ]]</li>
        <li v-for="item in objData">[[ item ]]</li>
        <li v-for="(obj,key) in objData">属性值[[ obj ]]------属性名[[ key ]]</li>
        <li v-for="obj in objList">属性值1:[[ obj.name ]]------属性值2:[[ obj.age ]]</li>
    </ul>

</div>
</body>
</html>

测试
在这里插入图片描述

焦点失去事件@blur和获取表单数据

获取表单数据时要让表单中标签的v-model=变量
然后在框架中用 变量: "" 就可以获取到
获取复选框时要变量:[] 否则获取的值就会是布尔值
@blur失去鼠标焦点是触发checkusername函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function () {
            var app = new Vue({
                //定义变量el和data
                el: '.box',

                data: {
                    // 获取html中v-model等于username的value
                    username: "",
                    password1: "",
                    password2: "",
                    sex: "",
                    // 复选框要使用列表，否则会返回true或者false
                    like: [],
                    city: "",
                    desc: "",

                },
                methods: {
                    register: function () {

                        alert(this.username + this.password1 + this.password2 + this.sex + this.like + this.city + this.desc)
                    },
                    checkusername: function () {
                        alert(this.username)
                    }
                }

            })
        }

    </script>
</head>
<body>
<div class="box">
    <div class="box">

        <table border="1">
            <tr>
                <td>用 户 名</td>
<!--            @blur失去鼠标焦点是触发checkusername函数       -->
                <td><input type="text" v-model="username" @blur="checkusername"></td>
                <td>{{username}}</td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" v-model="password1"></td>
                <td>{{password1}}</td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input type="password" v-model="password2"></td>
                <td>{{password2}}</td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    男<input type="radio" name="sex" value="boy" v-model="sex">
                    女 <input type="radio" name="sex" value="girl" v-model="sex"></td>
                <td>{{sex}}</td>
            </tr>
            <tr>
                <td>爱好</td>
                <td>
                    足球 <input type="checkbox" name="like" value="足球" v-model="like">
                    篮球 <input type="checkbox" name="like" value="篮球" v-model="like">
                    兵乓球<input type="checkbox" name="like" value="兵乓球" v-model="like">
                </td>
                <td>{{like}}</td>
            </tr>
            <tr>
                <td>所在城市</td>
                <td>
                    <select name="city" v-model="city">
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="广州">广州</option>
                        <option value="深圳">深圳</option>
                    </select>
                </td>
                <td>{{city}}</td>
            </tr>
            <tr>
                <td>个人简介</td>
                <td><textarea name="desc" v-model="desc"></textarea></td>
                <td>{{desc}}</td>
            </tr>
        </table>
        <button @click="register">注册</button>
    </div>
</div>
</body>
</html>

标签：迈出,function,Vue,el,第一步,data,app,属性
来源： https://blog.csdn.net/bjsyc123456/article/details/115399372