Vue.js 是一套构建用户界面的框架，只关注视图层，不操作dom，它不仅易于上手，还便于与第三方库或既有项目整合。
Vue的基本代码：
<!-- 1、导入vue包 去官网下载 --><script src="./vue-2.4.0.js"></script>
<body>
<!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 --><div id="app"><p>{{msg}}</p> // {{msg}}是插值表达式<p>lalala:{{age}}岁</p></div><script><!-- 2、创建一个Vue实例 ，当我们导入vue包的时候 就多了一个 Vue 构造者-->let vm = new Vue({el: "#app", // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域data: { // data 属性中，存放的是 el 中要用到的数据msg: "我是Vue", //通过Vue 中的指令，你会很方便的把数据渲染到页面，不需要再手动去操作dom}})</script>
</body>
Vue中的常见指令：
1、 v-text：会覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符，不会覆盖其元素中原本的内容
2、 v-clock：解决插值表达式闪烁，不常用
<p v-cloak>++++++++ {{ msg }} ----------</p><h4 v-text="msg">msg的值会把我覆盖掉</h4>
3、 v-html：会覆盖元素中原本的内容，可以解析html标签
<div v-html="msg">1212112</div> //data中的msg： msg2: '<h1>我是h1</h1>'
4、 v-bind:是vue中 提供用于绑定属性的指令 简写为 :要绑定的属性，v-bind中可以写合法的js表达式
5、 v-on:是用来注册事件的，v-on:click="",值一般为一个事件函数，事件函数定义在methods里面，data里面是定义数据的，methods和data是同级的，点击事件可以简写为@click
<input type="button" value="按钮" v-bind:title="mytitle + '123'" v-on:click="show"><input type="button" value="按钮" :title="mytitle + '123'" @click="show"> //简写methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法show: function() {alert('Hello')}}
6、事件修饰符：@click.stop
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件侦听器时使用事件捕获模式，从外到里
- .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
- .once 事件只触发一次
7、v-model 实现双向数据绑定 只在表单元素中有
<input type="text" v-model="msg">
8、v-for 指令的四种使用方式 需要配合data中的数据进行循环
1.v-for循环普通数组<p v-for="(item,i) in user">{{item}}</p>
2.v-for循环对象数组<p v-for="(item,i) in user">id:{{item.id}}----name:{{item.username}}</p>
3.v-for循环对象，在遍历对象身上的键值对的时候，除了val，key还有第三个 索引 很少用<p v-for="(val,key,i) in user">值:{{val}}--键:{{key}}</p>
4.v-for迭代数字<p v-for="count in 10">{{count}}</p>
<p v-for="(item,i) in user" :key="item.id">{{item}}</p>
key的作用其实就是让v-for循环的每一项具有唯一标识，通过唯一标识来记录那一项切记：key的参数值只能是字符串或数值
9、 v-if 的特点：每次都会重新删除或创建元素
有较高的切换性能消耗，如果元素涉及到频繁的切换，最好不要用v-if，建议用v-show
10、v-show 的特点：每次不会重新删除或创建元素操作，只是切换元素的display:none 样式
有较高的初始渲染消耗，如果只用一次的话，建议用v-if
本文发布于:2024-01-31 11:13:02，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170667078328101.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
