Vue基础语法

子非鱼921

于 2024-08-30 15:43:07 发布

阅读量184

点赞数 1

分类专栏： Vue.js入门及实战文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/weixin_45980065/article/details/141718541

版权

Vue.js入门及实战专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

1 下载vue.js
2 挂载点、模板和实例
3 数据、事件和方法
4 属性绑定和双向数据绑定
5 计算属性和侦听器
6 v-if、v-show和v-for指令

1 下载vue.js

Vue.js官网：https://v2.cn.vuejs.org/v2/guide/，将下载好的vue.js文件放入Vue文件夹（自定义名字）下即可。
在这里插入图片描述

2 挂载点、模板和实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>挂载点、模板和实例</title>
    <script src="./vue.js"></script>
</head>
<body>
    <!--挂载点、模板、实例之间的关系-->
    <div id="root"> <!--挂载点-->
        <!--模板就是挂载点内的内容-->
    </div>
    <script>
        /*实例*/
        new Vue({
            el: "#root",
            template: '<h1>{{msg}}</h1>',
            data:{
                msg: "world"
            }
        })
    </script>
</body>
</html>

3 数据、事件和方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据、事件和方法</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root"> 
        <h1>{{number}}</h1><!--number插入到h1中：插值表达式-->
        <h1 v-text="content"></h1><!--会转义：<h1>hello</h1>-->
        <h1 v-html="content"></h1><!--不会转义：hello-->
        <div v-on:click="handleClick">{{content}}</div><!--点击事件-->
        <div @click="handleClick">{{content}}</div><!--v-on:简写形式@-->
    </div>
    <script>
        new Vue({
            el: "#root",
            template: '',
            data:{
                msg: "world",
                number: 123,
                content: "<h1>hello</h1>"
            }, 
            methods:{
                handleClick:function(){
                    this.content = "world"
                }
            }
        })
    </script>
</body>
</html>

4 属性绑定和双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性绑定和双向数据绑定</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div v-bind:title="'del li' + title">hello world</div><!--属性和title数据项绑定。模板指令的等号后面跟的内容就是js表达式-->
        <div :title="'del li' + title">hello world</div><!--v-bind缩写:-->
        <input :value="content"/><!--单项绑定-->
        <input v-model="content"/><!--双向数据绑定，框内内容改变，content也变化-->
        <div>{{content}}</div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data:{
                title:"this is hello world",
                content: "this is content"
            }
        })
    </script>
</body>
</html>

5 计算属性和侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性和侦听器</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root"> 
        姓：<input v-model="firstName"/>
        名：<input v-model="lastName"/>
        <div>{{firstName}}{{lastName}}</div>
        <div>{{fullName}}</div><!--fullName是姓+名-->
        <div>{{count}}</div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data:{
                firstName: '',
                lastName: '',
                count: 0
            },
            /*计算属性，如果firstName和lastName没有变化，可以使用上一次的缓存值*/
            computed:{
                fullName: function(){
                    return this.firstName + ' ' + this.lastName
                }
            },
            /*侦听器，监听某个数据的变化，一点发生变化，就会在监听器中做业务逻辑*/
            watch:{
                /*firstName:function(){
                    this.count ++
                },
                lastName:function(){
                    this.count ++
                },*/
                fullName: function(){
                    this.count ++
                }
            }
        })
    </script>
</body>
</html>

6 v-if、v-show和v-for指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if、v-show和v-for指令</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root"> 
        <div v-if="show">hello world</div><!--从DOM中删除标签（如果只需要一次操作，该方法更好）-->
        <div v-show="show">hello world</div><!--加了个属性值display:none;隐藏标签（更好的选择，性能更高）-->
        <button @click="handleClick">toggle</button>
        <ul>
            <li v-for="item of list" :key="item">{{item}}</li><!--数据做循环展示（li标签）。:key提升每一项渲染的性能，要求每一次循环key值不相同-->
            <li v-for="(item, index) of list" :key="index">{{item}}</li><!--如果index改变（排序）就存在问题了-->
        </ul>
    </div>
    <script>
        new Vue({
            el: "#root",
            data:{
                show: true,
                list: [1, 2, 3]
            },
            methods:{
                handleClick: function(){
                    this.show = !this.show;
                }
            }
        })
    </script>
</body>
</html>

子非鱼921

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue基础语法

*计算属性，如果firstName和lastName没有变化，可以使用上一次的缓存值*//*侦听器，监听某个数据的变化，一点发生变化，就会在监听器中做业务逻辑*/，将下载好的vue.js文件放入Vue文件夹（自定义名字）下即可。
复制链接

扫一扫

专栏目录