vue基础语法

最新推荐文章于 2022-09-12 20:32:16 发布

Z_BK9

最新推荐文章于 2022-09-12 20:32:16 发布

阅读量146

点赞数

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

本文链接：https://blog.csdn.net/Z_BK9/article/details/126393616

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、v-text插文本值：

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

2、Html插值 v-html（会解析html内容）

<script src="js/vue.js"></script>
<body>
    <div id="app">
        <span v-text="addr"></span>
        <span v-html="addr"></span>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                addr: "<h1>凤城二路</h1>"
            },
        })
    </script>
</body>
</html>

3、v-bind属性插值：（动态绑定数据，可以简写为：）（title标签属性作用：鼠标指上显示相应的内容）

<script src="js/vue.js"></script>
<body>
    <div id="app">
        <span v-bind:title="info">tom</span>
        <!-- 简化写法 -->
        <span :title="info">tom</span>
    </div>

    <script>
         var vm = new Vue({
            el: "#app",
            data: {
                info: "hello tom"
            }
        })
    </script>
</body>

</html>


<script src="js/vue.js"></script>

<body>
    <div id="app">
        <div :class="{'class1':use}"></div>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                use: false
            }
        })
    </script>
    <style >
        .class1 {
            width: 200px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>
</body>

</html>

4、V-on：事件（可以简写为@事件）

<script src="js/vue.js"></script>

<body>
    <div id="app">
        <button v-on:click="show()">点击我看看</button>
        <!-- 简写形式 -->
        <button @click="show1()">点击我看看</button>     
    </div>
    <script>        
        var vm = new Vue({
            el: "#app",
            data: {
            },
            methods: {
                show:function(){
                    alert("hello tom");
                },
                show1(){
                    alert("hello tomm");
                }
            },
        })
    </script>
</body>

<script src="js/vue.js"></script>
<body>
    <div id="app">    
           <!--此处使用vue默认的事件对象作为实参进行传递-->
        <button @click="show2($event,1,2,3)">点击我看看</button>
    </div>
    <script>        
        var vm = new Vue({
            el: "#app",
            data: {
            },
            methods: {               
                show2(event,a,b,c){
                    alert(event.target.tagName)
                    console.log(a);
                }
            },
        })
    </script>
</body>

.once：设置事件只能触发一次，比如按钮的点击等。

 <button @click.once="show1()">点击我看看</button>

.stop:阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递）

<script src="js/vue.js"></script>
<body>
    <div id="app">
        <div class="class1" @click="show">
            <div class="class2" @click.stop="show2"></div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
            },
            methods: {
                show(){
                    alert("one");
                },
                show2(){
                    alert("two");
                }
            },

        })
    </script>
    <style>
        .class1{
            background-color:red;width: 200px;height: 200px;
        }
        .class2{
            background-color:rgb(47, 0, 255);width: 100px;height: 100px;
        }
    </style>
</body>

. self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响

<div class="class1" @click.self="show">
      <div class="class2" @click="show2"></div>
</div>

.prevent：阻止默认事件的发生

默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生。

<div id="app">
    <a href="https://www.baidu.com" @click.prevent="show">去百度</a>
</div>

5、样式绑定，样式绑定可以通过class属性和style属性实现动态绑定，class比较常用

使用：class

<script src="js/vue.js"></script>

<body>
    <div id="app">
        <div :class="{'myclass':isshow}"></div>
        <button @click="show">{{msg}}</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "显示",
                isshow: false
            },
            methods: {
                show() {
                    this.isshow = this.isshow ? false : true;
                    this.msg = this.msg == "显示" ? "隐藏" : "显示";
                }
            },
        })
    </script>
    <style lang='less'>
        .myclass {
            background-color: blueviolet;
            width: 200px;
            height: 200px;
        }
    </style>
</body>

</html>

6、V-if

根据表达式的值的来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

<script src="js/vue.js"></script>/。
<body>rd0ol.
    <div id="app">
        <div>考试成绩：{{num}}</div>
        <div v-if="num>=90">
        优秀
        </div>
        <div v-else-if="num>=80">
        良
        </div>
        <div v-else-if="num>=70">
        中等
        </div>
        <div v-else-if="num>=60">
        及格
        </div>
        <div v-else>
        不及格
        </div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: Math.round(Math.random()*100)               
            }
        })
    </script>
</body>

7、V-SHOW

用于根据条件展示元素的选项是 v-show 指令。用法和v-if大致一样：

<h1 v-show="ok">Hello!</h1>

v-if 和 v-show 区别：

v-if 是动态添加，当值为false 时，是完全移除该元素，即 dom 树中不存在该元素。
v-show 仅是隐藏 / 显示，值为 false 时，该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。
当<template> 存在于未被 vue 实例化的组件中时可以正常隐藏，天生 display：none

8、V-for

<script src="js/vue.js"></script>

<body>

    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Sex</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="person in people">
                    <td>{{ person.name  }}</td>
                    <td>{{ person.age  }}</td>
                    <td>{{ person.sex  }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        var vm = new Vue({
			el: '#app',
			data: {
				people: [{
					name: 'Jack',
					age: 30,
					sex: 'Male'
				}, {
					name: 'Bill',
					age: 26,
					sex: 'Male'
				}, {
					name: 'Tracy',
					age: 22,
					sex: 'Female'
				}, {
					name: 'Chris',
					age: 36,
					sex: 'Male'
				}]
			}
		})
    </script>

<script src="js/vue.js"></script>

<body>
    <div id="app">
        <select>
            <option v-for="(dept, index) in list" :key="index" :value="dept.deptId">{{dept.deptName}}</option>
        </select>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [{
                        deptId: 10,
                        deptName: "人事部"
                    },
                    {
                        deptId: 20,
                        deptName: "研发部"
                    },
                    {
                        deptId: 30,
                        deptName: "销售部"
                    },
                ]
            }
        })
    </script>
</body>

</html>

9、V-model

可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

<script src="js/vue.js"></script>
<body>

    <div id="app">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'tom'
            }
        })
    </script>

</body>

10、Vue表单

<script src="js/vue.js"></script>

<body>
    <div id="app">
        <form>
            <input type="text" v-model="userName" /><br />
            <input type="password" v-model="password" /><br />
            <input type="radio" v-model="sex" value="1" />男
            <input type="radio" v-model="sex" value="0" />女<br />
            <input type="checkbox" v-model="hobby" value="eat" />吃
            <input type="checkbox" v-model="hobby" value="drink" />喝
            <input type="checkbox" v-model="hobby" value="paly" />玩<br />
            <select v-model="deptId">
                <option v-for="(dept, index) in list" :key="index" :value="dept.deptId">{{dept.deptName}}</option>
            </select>
        </form>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                userName: "tom",
                password: "123",
                sex: 0,
                hobby: ["drink"],
                list: [{
                        deptId: 10,
                        deptName: "人事部"
                    },
                    {
                        deptId: 20,
                        deptName: "研发部"
                    },
                    {
                        deptId: 30,
                        deptName: "销售部"
                    },
                ],
                deptId: 20
            }
        })
    </script>

</body>

</html>

Z_BK9

关注

0
点赞
踩
0

收藏

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

默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生。根据表达式的值的来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。用于根据条件展示元素的选项是 v-show 指令。元素上创建双向数据绑定。...
复制链接

扫一扫