Vue——01起步、模板语法、条件语句

最新推荐文章于 2024-09-11 15:05:16 发布

Southern Wind

最新推荐文章于 2024-09-11 15:05:16 发布

阅读量217

点赞数 1

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

本文链接：https://blog.csdn.net/nanchen_J/article/details/120398356

版权

Vue 专栏收录该内容

44 篇文章 11 订阅

订阅专栏

通过以下代码获取Vue.js

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

Vue是一种声明式的变成，而原生js是命令式编程

命令式编程（原生JS）：

创建div元素，设置id属性
定义一个变量叫message
将message变量放在div元素中显示
修改message数据
将修改的元素替换到div

声明式编程（Vue）：

创建一个div元素，设置id属性
定义一个vue对象，将div挂载在vue对象上
在vue对象内定义变量message，并绑定数据
将message变量放在div元素上显示
修改vue对象中的变量message，div元素数据自动改变

下面是基础用法：

Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。

data 用于定义属性，本实例中写了一个属性为message。

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

{{ }} 用于输出对象属性和函数返回值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建一个动态的div</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 首先创建一个div盒子他的ID为box -->
    <div id="box">
        {{message}}              <!-- {{ }} 用于输出对象属性和函数返回值。 -->
    </div>
<button @click="fn1()">点击按钮</button>  <!-- 点击事件的写法 -->
    <script>
        var box = new Vue({       
            el:'#box',      <!-- 有一个el 参数，它是 DOM 元素中的 id,也就是上方div中的box -->
            data:{            <!-- data：定义属性 -->
                message:'你好'<!-- 如果要是多个属性就用,隔开 -->
            },
            methods:{      <!-- methods 用于定义的函数，可以通过 return 来返回函数值-->
                 fn1:function(){
                    console.log('你点击了此按钮');
                }
            }
        })
    </script>
</body>
</html>

效果如下：

可以通过F12调用到控制台，去更改Vue对象的message的值

Vue模板语法：

指令

指令是带有 v- 前缀的特殊属性，用于在表达式的值改变时，将某些行为应用到 DOM 上。

v-html ：有时候我们不希望直接输出<h1>欢迎学习Vue</h1>这样的字符串，而输出被html自己转换的h1的文字，此时可以使用v-html

   <div id="box">
        <div v-html='message'></div>
    </div>
    <script>
        var box = new Vue({
            el:'#box',
            data:{
                message:'<h1>欢迎学习Vue</h1>',
            },
        })
    </script>

效果如下：

v-on ：监听DOM v-on:click 也可以写成 @click 后者是其语法糖

举个例子：

  <!-- 首先创建一个div盒子他的ID为box -->
    <div id="box">
        <!-- <button v-on:click='add()'>+</button> -->
        <button @click='add()'>+</button>         <!-- 这两种方法都可以 -->
        <h2>{{count}}</h2>
    </div>
    <script>
        var box = new Vue({
            el:'#box',
            data:{
                message:'欢迎学习Vue',
                count:0,
            },
            methods:{
                add:function(){
                    this.count++
                }
               <!-- 两种写法都可
                add(){
                    this.count++
               }
                 -->
            }
        })
    </script>

效果如下：

v-once：表示该dom元素只渲染一次，之后数据改变，不会再次渲染

举个例子：

 <div id="box">
       <h2>{{message}}</h2>
        <div v-once>{{message}}</div>
        <div v-once>{{message}}</div>
    </div>
    <script>
        var box = new Vue({
            el:'#box',
            data:{
                message:'欢迎学习Vue',
            },
        })
    </script>

v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

    <div id="box">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>
    <script>
        var box = new Vue({
            el: '#box',
            data: {
                message: '欢迎学习Vue',
            },
        })
    </script>

v-bind ：指令被用来响应地更新 HTML 属性

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-bind:title 我们也可以写成:title 后者是其语法糖，其作用当鼠标悬停在某段文字上时会出现提示

感兴趣的可以自己去尝试一下。

v-if：彻底消失

v-show此消失是等于display：none；经常做开销比较大的显示和消失，建议用v-show

 <div id="box">
        <h2 v-if="seen">seen</h2>
        <h2 v-show="show">show</h2>
    </div>
    <script>
        var box = new Vue({
            el: '#box',
            data: {
                seen:true,
                show:false,
            },
        })
    </script>

v-pre：有时候我们期望直接输出{{message}}这样的字符串，而不是被{{}}语法转换的message的变量值，此时我们可以用v-pre标签

    <div id="box">
        <h1 v-pre>{{message}}</h1>
    </div>
    <script>
        var box = new Vue({
            el: '#box',
            data: {
                message:'你好'
            },
        })
    </script>

效果如下：

v-text：覆盖dom元素中的数据，相当于js的innerHTML方法

    <div id="box">
        <h1 v-text='p'>{{message}}</h1>
    </div>
    <script>
        var box = new Vue({
            el: '#box',
            data: {
                message:'你好',
                p:'我很好'
            },
        })
    </script>

Vue.js条件语句：v-if、v-else-if、v-else直接看例子：

    <div id="box">
        <h2 v-if="age<60">不及格</h2>
        <h2 v-else-if="age<95">良好</h2>
        <h2 v-else>优秀</h2>
    </div>
    <script>
        var box = new Vue({
            el: '#box',
            data: {
                age:88
            },
        })
    </script>

v-for ：可以绑定数据到数组来渲染一个列表

切换栏效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历列表</title>
    <script src="js/vue.js"></script>
    <style>
        ul li{
            cursor: pointer;
        }
        .active {
            color: #f00;
           
        }
    </style>
</head>

<body>
    <!-- 首先创建一个div盒子他的ID为box -->
    <div id="box">
        <ul>
            <!-- <li v-for='(item,index) in movies' :key='index' :class="{active:currentIndex === index}"
                @click="change(index)">{{item}}-------{{index}}</li> -->
            <!-- <li v-for='(item,index) in movies' :key='index' :class="currentIndex === index?'active':''"
                @click="change(index)">{{item}}-------{{index}}</li> -->
                <li v-for="(item,index) in movies" :key="index" :class="getStyle2(index)" @click="change(index)">{{item}}-------{{index}}</li>
        </ul>
    </div>
    <script>
        var box = new Vue({
            el: '#box',
            data: {
                movies: [
                    "海王", "海贼王", "火影忍者", "复仇者联盟"
                ],
                currentIndex: 0,
            },
            methods: {
                change(index) {
                    // this.currentIndex = index
                    if (this.currentIndex === index)
                        return;
                    this.currentIndex = index
                },
                getStyle() {
                    return {
                        active: this.isActive
                    }
                },
                getStyle2(index) {
                    return {
                        active: this.currentIndex === index
                    }
                }
            }
        })
    </script>
</body>

</html>

获取图片以及链接用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        img{
            width: 300px;
        }
    </style>
</head>
<body>
    <div id="box">
        <h2>{{message}}</h2>
        <img :src="imgURL" alt="">
        <a :href="aHerf">百度一下</a>
    </div>
    <script>
        var box = new Vue({
            el:'#box',
            data:{
                message:'Hello Vue',
                aHerf:"https://www.baidu.com",
                imgURL:"https://desk-fd.zol-img.com.cn/g5/M00/02/00/ChMkJlbKw5aIY6PYAA0XnsktgwEAALG5QPtg4wADRe2915.jpg",
            },
            methods:{
                
            }
        })
    </script>
</body>
</html>

效果如下：