Vue指令使用

最新推荐文章于 2024-02-01 10:31:41 发布

小码农小杨

最新推荐文章于 2024-02-01 10:31:41 发布

阅读量180

点赞数 2

文章标签： vue vue指令前端框架

本文链接：https://blog.csdn.net/weixin_44544859/article/details/117769868

版权

Vue下载地址：https://github.com/vuejs/vue（下载解压，在dist 可得到vue.js文件）
直接使用公共的CDN：

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

Vue 是一套用于构建用户界面的渐进式框架（可以选择性的使用该框架的一个或一些组件，这些组件的使用也不需要将框架全部组件都应用；而且用了这些组件也不要求你的系统全部都使用该框架）。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue使用MVVM模式
M：即Model，模型，包括数据和一些基本操作
V：即View，视图，页面渲染结果
VM：即View-Model，模型与视图间的双向操作

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：只要Model发生了改变，View上自然就会表现出来，当用户修改了View，Model中的数据也会跟着改变，把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。

vue渲染：

<!DOCTYPE html>
<head>
  	<title>vue渲染测试</title>
</head>
<body>
<div id="app"> <h2>插值表达式：{{name}}</h2> </div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//vue初始化
  var app = new Vue({
    	el:"#app",//el即element，要渲染的页面元素
    	data: {
     		name:"vue渲染"
   	}
 });
</script>
</body>
</html>

钩子函数：

<div id="app"> {{msg}} </div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{ msg: "" },
        //钩子函数
        created() {
            //这里的this表示vue实例
			console.log(this);
			this.msg = "hello vue. created.";
	}
})
</script>

钩子函数created()效果：
在这里插入图片描述

v-text、v-html:

<div id="app">
    v-text: <span v-text="msg"></span><br>
    v-html: <span v-html="msg"></span><br>
</div>
<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            msg:"<h2>hello, vue.</h2>"
        }
    });
</script>

v-text、v-html效果：（v-text输出文本、v-html输出会被渲染）
在这里插入图片描述

v-model双向绑定：

<div id="app">
    <input type="checkbox" value="Java" v-model="language">Java<br>
    <input type="checkbox" value="Python" v-model="language">Python<br>
    <input type="checkbox" value="Swift" v-model="language">C++<br>
    <h2>
        你选择了: {{language.join(",")}}
    </h2>
</div>
<!--多个checkbox对应一个model时，model的类型是数组，单个checkbox是boolean类型
    radio对应的值是input的value值
    input 和 textarea 默认对应的model是字符串
    select 单选对应字符串，多选对应也是数组-->
<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            language:[]
        }
    });
</script>

v-model效果：（input选择改变，h2的值会跟着改变，反之同理）
在这里插入图片描述

v-on绑定事件:（可简写为@）

<div id="app">
    <button v-on:click="num++">增加</button>
    <button @click="decrement">减少</button>
    <h2> {{num}} </h2>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            num:"1",
        },
        methods:{
            //递减
            decrement () {
                this.num--;
            }
        }
    });
</script>

为了方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，Vue.js 为 v-on 提供了事件修饰符，修饰符是由点开头的指令后缀来表示：
.stop ：阻止事件冒泡，调用 event.stopPropagation()
.prevent ：阻止默认事件发生，调用 event.preventDefault()
.capture ：使用事件捕获模式
.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once ：只触发一次回调
.{keyAlias} - 仅当事件是从特定键触发时才触发回调。
.left - 只当点击鼠标左键时触发。
.right - 只当点击鼠标右键时触发。
.middle - 只当点击鼠标中键时触发。
.passive - { passive: true } 模式添加侦听器

例：

<!-- 停止冒泡 --><button @click.stop="doThis"></button>
<!-- 阻止默认行为 --><button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 --><form @submit.prevent></form>
<!-- 串联修饰符 --><button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 --><input @keyup.enter="onEnter" />
<!-- 点击回调只会触发一次 --><button @click.once="doThis"></button>

在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)：

<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>

v-for:

<div id="app">
    <ul>
        <li v-for="(user, index) in users" :key="index">
            {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
    </ul>
    <ul>
        <li v-for="(value, key, index) in person">
            {{index}}--{{key}}--{{value}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            users:[
                {"name":"银灰","age":13,"gender":"男"},
                {"name":"能天使","age":13,"gender":"女"},
                {"name":"艾雅法拉","age":4,"gender":"女"}
            ],
            person:{"name":"史尔特尔","age":13,"gender":"女","address":"罗德岛"}
        }
    });
</script>

v-for效果：
在这里插入图片描述

v-for语法：
v-for=“value in object”
v-for="(value,key) in object"
v-for="(value,key,index) in object"

1个参数时，得到的是对象的值
2个参数时，第一个是值，第二个是键
3个参数时，第三个是索引，从0开始

v-if、v-else-if、v-else：

<div id="app">
<ul v-for="(user, index) in users" :key="index" >
    <li v-if="user.gender=='女'" style="background-color: deeppink; color: white">
        {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
    </li>
    <li v-else-if="user.gender=='男'" style="background-color: blue; color: white">
        {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
    </li>
    <li v-else>
        {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
    </li>
</ul>

</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            show: true,
            users:[
                {"name":"银灰","age":13,"gender":"男"},
                {"name":"能天使","age":13,"gender":"女"},
                {"name":"艾雅法拉","age":4,"gender":"女"},
                {"name":"塞雷亚","age":16,"gender":""}
            ]
        }
    });
</script>

v-if、v-else-if、v-else效果：
在这里插入图片描述

v-show：（显示隐藏）

<div id="app">
    <button @click="show=!show">点我</button>
    <h2 v-show="show">
        你好；v-show！
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            show: true,
        }
    });
</script>

v-bind：（对元素的任何属性设置vue实例的数据，可简写为”:”）

<style type="text/css">
    .red{
        background-color: red;
    }
    .blue{
        background-color: blue;
    }
</style>
<div id="app" style="width: 100px; height: 100px; color: white;">
    <button @click="bool=!bool">点我改变下面色块的颜色</button>
    <div :class="{red:bool, blue:!bool}">
        点击按钮改变背景颜色
    </div>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            color:"red",
            bool:true
        }
    });
</script>

计算属性computed:

<h2>
    computed计算方式；你的生日为：{{birth}}
 </h2>
<script>
var app = new Vue({
	el:"#app",
	data: {  birthday:1429032123201 },
    computed:{
     	birth(){
        	const date = new Date(this.birthday);
        	return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDay();
    	}
  	}
});
</script>

监控watch：

<div id="app">
    <input type="text" v-model="message">
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            message:"abc",
        },
        watch:{
            message(newValue, oldValue){
                console.log("新值：" + newValue + "；旧值：" + oldValue);
            },
        }
    });
</script>

watch效果：

在这里插入图片描述

小码农小杨

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Vue指令使用

Vue下载地址：https://github.com/vuejs/vue（下载解压，在dist 可得到vue.js文件）直接使用公共的CDN：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>Vue 是一套用于构建用户界面的渐进式框架（可以选择性的使用该框架的一个或一些组件，这些组件的使用也不需要将框架全部组件都应用；而且用了这些组件也不要求你的系统全部都使用该框架）。与其它大型框架不同的是
复制链接

扫一扫