博客列表 >VUE学习之简介及常用指令

VUE学习之简介及常用指令

景云
景云原创
2021年03月24日 11:43:50524浏览

1. VUE简介绍

HTML

  1. <!-- 创建一个vue根节点(其内所有内容都可以用vue实例进行管理) -->
  2. <div class="app">
  3. <!-- 插值(数据占位符),比如{{username}} -->
  4. <p>用户名: {{username}}</p>
  5. <p>{{username + ', php.cn讲师'}}</p>
  6. <p>10 + 30 = {{ 10 + 30}}</p>
  7. <p>{{flag ? '上午好' : '睡觉了'}}</p>
  8. </div>

VUE

首先别忘了引入库

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

  1. //声明vue的作用域
  2. const vm = new Vue({
  3. //挂载点(可简写为`el:'.app'`)
  4. el: document.querySelector('.app'),
  5. //数据注入;在data中声明的所有变量都自动成为vue实例的属性
  6. data: {
  7. username: 'Jy',
  8. }
  9. })
  10. //外部访问可以用以下方式
  11. vm.username = 'Jy2';

2.VUE常用指令

2.1 v-text: 专门由vue实例管理的自定义属性;等同于innerText/textContent

  1. //会将vue中username的数据渲染到`p`标签中
  2. <p v-text="username"></p>

2.2 v-once

  1. //效果等同`v-text`,不过只渲染一次
  2. <p v-once="username"></p>

2.3 v-html,等同于innerHTML

  1. //例如下面是vue中data的数据,向p标签中渲染时,样式也会有,下面的p标签中Jy3的字体颜色将是红色
  2. username = '<em style="color:red">Jy3</em>';
  3. <p v-html="username"></p>

2.4 v-bind:绑定styleclass属性;高频指令,可简写为:

  1. //其中style1在data中为`color:red`;执行时p标签内颜色为红色
  2. <p v-bind:style="style1">style样式</p>
  3. //简写为
  4. <p :style="style1">style样式</p>
  5. //设置类名
  6. <p :class="class1">class类</p>

2.5 v-on:绑定事件,高频指令,可简写为@

VUE

  1. const vm = new Vue({
  2. el: '.app',
  3. data: {
  4. site: 'php中文网',
  5. },
  6. methods: {
  7. show() {
  8. // this: 就是当前的vue实例对象
  9. alert(this.site)
  10. },
  11. handle(ev, a, b) {
  12. console.log(ev.type, ev.target);
  13. console.log("%d + %d = %d", a, b, (a + b));
  14. }
  15. },
  16. })

2.5.1

  1. //点击将会执行`show`方法
  2. <p> v-on:click="show">显示网站名称</p>

2.5.2 prevent:事件修饰符,阻止元素的默认行为

  1. <p><a href="https://php.cn" @click.prevent="show">显示网站名称2</a></p>

2.5.3 stop:阻止冒泡

  1. <p><a href="https://php.cn" @click.prevent.stop="show">显示网站名称2</a></p>

2.5.4 once:仅允许执行一次

  1. <p><a href="https://php.cn" @click.prevent.stop.once="show">显示网站名称2</a></p>

2.5.5 事件方法的传参(事件对象的参数名必须是 $event)

  1. <button @click.stop="handle($event, 100, 200)">click</button>

2.6 v-model:双向绑定

  1. //vue的data中`site:PHP中文网`,下面输入框内的数据和site的数据双向绑定,修改其一另外一个也跟着修改
  2. //v-mode="site",等同于 @input="site=$event.target.value"
  3. <p>双向绑定: <input type="text" v-model="site"></p>
  4. //只有在输入框失去焦点或者按下回车键才会执行
  5. <p>双向绑定: <input type="text" v-model.lazy="site"></p>

2.7 v-for:循环

HTML

  1. <div class="app">
  2. <!-- key: 可以干预diff算法 -->
  3. <!-- vue通过稳定且唯一的key值判断这个节点是否需要重新渲染, 以提升效率 -->
  4. <!-- key只能是整数或不重复的字符串 -->
  5. <!-- item为数组中的值,index为其键(key) -->
  6. <ul>
  7. <li v-for="(item,index) in items" :key="index">{{index}}--{{item}}</li>
  8. </ul>
  9. <!-- item为属性的值,prop为其键(key),index为属性的名称 -->
  10. <ul>
  11. <li v-for="(item,prop,index) in user" :key="prop">{{prop}}--{{index}}--{{item}}</li>
  12. </ul>
  13. <!-- item为数组中的对象 其键(key)最后使用对象的id ,index为对象在数组中的键 -->
  14. <ul>
  15. <li v-for=" (user, index) in users" :key="user.id">{{user.id}}--{{user.name}}--{{user.email}}</li>
  16. </ul>
  17. </div>

VUE

  1. const vm = new Vue({
  2. el: ".app",
  3. data: {
  4. // 数组
  5. items: ["山东", "江苏", "上海"],
  6. // 对象
  7. user: {
  8. name: "Jy",
  9. email: "Jy@php.cn",
  10. },
  11. // 对象数组
  12. users: [
  13. { id: 1, name: "Jy1", email: "Jy1@php.cn" },
  14. { id: 2, name: "Jy2", email: "Jy2@php.cn" },
  15. { id: 3, name: "Jy3", email: "Jy3@php.cn" },
  16. ],
  17. },
  18. });
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议