首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

vue常用指令代码实例总结

Posted in Python onMarch 16, 2020

vue常用内置指令

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>12_指令_内置指令</title>
 <style>
  [v-cloak] { display: none }
 </style>
</head>
<body>
<!--
常用内置指令
 v:text : 更新元素的 textContent
 v-html : 更新元素的 innerHTML
 v-if : 如果为true, 当前标签才会输出到页面
 v-else: 如果为false, 当前标签才会输出到页面
 v-show : 通过控制display样式来控制显示/隐藏
 v-for : 遍历数组/对象
 v-on : 绑定事件监听, 一般简写为@
 v-bind : 强制绑定解析表达式, 可以省略v-bind
 v-model : 双向数据绑定
 ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
 v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
-->
<div id="example">
 <p v-cloak>{{content}}</p>
 <p v-text="content"></p>  <!--p.textContent = content-->
 <p v-html="content"></p> <!--p.innerHTML = content-->
 <p ref="msg">abcd</p>
 <button @click="hint">提示</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
 new Vue({
  el: '#example',
  data: {
   content: '<a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" >百度一下</a>'
  },
  methods: {
   hint () {
    alert(this.$refs.msg.innerHTML)
   }
  }
 })
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <!-- 数据绑定 -->
    <a v-bind:href="url" rel="external nofollow" >百度一下</a>
    <!-- 双向数据绑定 -->
    <input type="text" v-model="name">
    <p>{{name}}</p>
    
    <!-- 绑定回车键 -->
    <input type="text" @keyup.enter="showEnt">
    <!-- 点击事件 -->
    <button @click="show('888')">按钮</button>
    <!-- 获取数组值 -->
    <p>{{arr[1]}}</p>
    <!-- 获取对象属性 -->
    <p>{{users[1].name}}</p>
  </div>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        name:'',
        url: 'http://www.baidu.com',
        arr: ["a", "b", "c", "d"],
        users: [
          { name: "aowei", age: 12 },
          { name: "baozi", age: 13 },
          { name: "bbbbb", age: 14 },
        ]
      },
      methods: {
        // 绑定回车键
        showEnt: function () {
          alert("666");
        },
        // 传参
        show: function (num) {
          alert(num);
        }
      },
    }
    )
  </script>
</body>
</html>

计算属性和监视

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>03_计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性
 在computed属性对象中定义计算属性的方法
 在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
 通过通过vm对象的$watch()或watch配置来监视指定的属性
 当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
 通过getter/setter实现对属性数据的显示和监视
 计算属性存在缓存, 多次读取只执行一次getter计算
-->
<div id="demo">
 姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
 名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
 <!--fullName1是根据fistName和lastName计算产生-->
 姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
 姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
 姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
 <p>{{fullName1}}</p>
 <p>{{fullName1}}</p>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
 const vm = new Vue({
  el: '#demo',
  data: {
   firstName: 'A',
   lastName: 'B',
   fullName2: 'A-B'
  },
  // 计算属性配置: 值为对象
  computed: {
   fullName1:function() { // 属性的get()
    return this.firstName + '-' + this.lastName;
   },
   fullName3: {
    // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
    get () {
     return this.firstName + '-' + this.lastName
    },
    // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
    set (value) {// fullName3的最新value值 A-B23
     // 更新firstName和lastName
     const names = value.split('-')
     this.firstName = names[0]
     this.lastName = names[1]
    }
   }
  },
  watch: {
   // 配置监视firstName
   firstName: function (value) { // 相当于属性的set
    // 更新fullName2
    this.fullName2 = value + '-' + this.lastName
   }
  }
 })
 // 监视lastName
 vm.$watch('lastName', function (value) {
  // 更新fullName2
  this.fullName2 = this.firstName + '-' + value
 })
</script>
</body>
</html>

列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for='item in arr'>
        {{item}}
      </li>
    </ul>
    <ul>
      <li v-for="(item,index) in arr">
        {{index}} --- {{item}}
      </li>
    </ul>
    <h3 v-for="user in users" v-bind:title="user.name">
      {{user.name}} --- {{user.age}}
    </h3>
    <button @click="add">add按钮</button>
    <button @click="del">del按钮</button>
  </div>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        arr: ["a", "b", "c", "d"],
        users: [
          { name: "aowei", age: 12 },
          { name: "baozi", age: 13 },
          { name: "bbbbb", age: 14 },
        ]
      },
      methods: {
        add: function () {
          console.log("add");
          this.users.push({ name: "hello", age: "3" });
        },
        del: function () {
          console.log("del");
          this.users.shift();
        }
      },
    }
    )
  </script>
</body>
</html>

class & style 绑定

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>04_class与style绑定</title>
 <style>
  .classA {
   color: red;
  }
  .classB {
   background: blue;
  }
  .classC {
   font-size: 20px;
  }
 </style>
</head>
<body>
<!--
1. 理解
 在应用界面中, 某个(些)元素的样式是变化的
 class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
 xxx是字符串
 xxx是对象
 xxx是数组
3. style绑定
 :style="{ color: activeColor, fontSize: fontSize + 'px' }"
 其中activeColor/fontSize是data属性
-->
<div id="demo">
 <h2>1. class绑定: :class='xxx'</h2>
 <p :class="myClass">xxx是字符串</p>
 <p :class="{classA: hasClassA, classB: hasClassB}">xxx是对象</p>
 <p :class="['classA', 'classB']">xxx是数组</p>
 <h2>2. style绑定</h2>
 <p :style="{color:activeColor, fontSize}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>
 <button @click="update">更新</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
 new Vue({
  el: '#demo',
  data: {
   myClass: 'classA',
   hasClassA: true,
   hasClassB: false,
   activeColor: 'red',
   fontSize: '20px'
  },
  methods: {
   update () {
    this.myClass = 'classB'
    this.hasClassA = !this.hasClassA
    this.hasClassB = !this.hasClassB
    this.activeColor = 'yellow'
    this.fontSize = '30px'
   }
  }
 })
</script>
</body>
</html>

条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>08_条件渲染</title>
</head>
<body>
<!--
1. 条件渲染指令
 v-if
 v-else
 v-show
2. 比较v-if与v-show
 如果需要频繁切换 v-show 较好
-->
<div id="demo">
 <p v-if="ok">表白成功</p>
 <p v-else>表白失败</p>
 <hr>
 <p v-show="ok">求婚成功</p>
 <p v-show="!ok">求婚失败</p>
 <button @click="ok=!ok">切换</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
 new Vue({
  el: '#demo',
  data: {
   ok: true,
  }
 })
</script>
</body>
</html>

事件处理

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>07_事件处理</title>
</head>
<body>
<!--
1. 绑定监听:
 v-on:xxx="fun"
 @xxx="fun"
 @xxx="fun(参数)"
 默认事件形参: event
 隐含属性对象: $event
2. 事件修饰符:
 .prevent : 阻止事件的默认行为 event.preventDefault()
 .stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
 .keycode : 操作的是某个keycode值的健
 .enter : 操作的是enter键
-->
<div id="example">
 <h2>1. 绑定监听</h2>
 <button @click="test1">test1</button>
 <button @click="test2('abc')">test2</button>
 <button @click="test3('abcd', $event)">test3</button>
 <h2>2. 事件修饰符</h2>
 <!-- 阻止事件默认行为 -->
 <a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" @click.prevent="test4">百度一下</a>
 <div style="width: 200px;height: 200px;background: red" @click="test5">
  <div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
  <!-- 阻止事件冒泡 -->
 </div>
 <h2>3. 按键修饰符</h2>
 <!-- enter键/13 -->
 <input type="text" @keyup.13="test7">
 <input type="text" @keyup.enter="test7">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
 new Vue({
  el: '#example',
  data: {
  },
  methods: {
   test1(event) {
    alert(event.target.innerHTML)
   },
   test2 (msg) {
    alert(msg)
   },
   test3 (msg, event) {
    alert(msg+'---'+event.target.textContent)
   },
   test4 () {
    alert('点击了链接')
   },
   test5 () {
    alert('out')
   },
   test6 () {
    alert('inner')
   },
   test7 (event) {
    console.log(event.keyCode)
    alert(event.target.value)
   }
  }
 })
</script>
</body>
</html>

表单数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>08_表单输入绑定</title>
</head>
<body>
<!--
1. 使用v-model(双向数据绑定)自动收集数据
 text/textarea
 checkbox
 radio
 select
-->
<div id="demo">
 <!-- 阻止表单自动提交，手动ajax提交 -->
 <form action="/xxx" @submit.prevent="handleSubmit"> 
  <span>用户名: </span>
  <input type="text" v-model="username"><br>
  <span>密码: </span>
  <input type="password" v-model="pwd"><br>
  <span>性别: </span>
  <input type="radio" id="female" value="女" v-model="sex">
  <label for="female">女</label>
  <input type="radio" id="male" value="男" v-model="sex">
  <label for="male">男</label><br>
  <span>爱好: </span>
  <input type="checkbox" id="basket" value="basket" v-model="likes">
  <label for="basket">篮球</label>
  <input type="checkbox" id="foot" value="foot" v-model="likes">
  <label for="foot">足球</label>
  <input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
  <label for="pingpang">乒乓</label><br>
  <span>城市: </span>
  <select v-model="cityId">
   <option value="">未选择</option>
   <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
  </select><br>
  <span>介绍: </span>
  <textarea rows="10" v-model="info"></textarea><br><br>
  <input type="submit" value="注册">
 </form>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
 new Vue({
  el: '#demo',
  data: {
   username: '',
   pwd: '',
   sex: '男',
   likes: ['foot'],
   allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
   cityId: '2',
   info: ''
  },
  methods: {
   handleSubmit () {
    console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
    alert('提交注册的ajax请求')
   }
  }
 })
</script>
</body>
</html>

生命周期

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>09_Vue实例_生命周期</title>
</head>
<body>
<!--
1. vue对象的生命周期
 1). 初始化显示
  * beforeCreate()
  * created()
  * beforeMount()
  * mounted()
 2). 更新状态
  * beforeUpdate()
  * updated()
 3). 销毁vue实例: vm.$destory()
  * beforeDestory()
  * destoryed()
2. 常用的生命周期方法
 created()/mounted(): 发送ajax请求, 启动定时器等异步任务
 beforeDestory(): 做收尾工作, 如: 清除定时器
-->
<div id="test">
 <button @click="destroyVue">destory vue</button>
 <p v-if="isShow">尚硅谷IT教育</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
 new Vue({
  el: '#test',
  data: {
   isShow: true
  },
  beforeCreate() {
   console.log('beforeCreate()')
  },
  created() {
   console.log('created()')
  },
  beforeMount() {
   console.log('beforeMount()')
  },
  mounted () {
   console.log('mounted()')
   // 执行异步任务
   this.intervalId = setInterval(() => {
    console.log('-----')
    this.isShow = !this.isShow
   }, 1000)
  },
  beforeUpdate() {
   console.log('beforeUpdate()')
  },
  updated () {
   console.log('updated()')
  },
  beforeDestroy() {
   console.log('beforeDestroy()')
   // 执行收尾的工作
   clearInterval(this.intervalId)
  },
  destroyed() {
   console.log('destroyed()')
  },
  methods: {
   destroyVue () {
    this.$destroy()
   }
  }
 })
</script>
</body>
</html>

过渡，动画

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>10_过渡&动画1</title>
 <style>
  /*指定过渡样式*/
  .xxx-enter-active, .xxx-leave-active {
   transition: opacity 1s
  }
  /*指定隐藏时的样式*/
  .xxx-enter, .xxx-leave-to {
   opacity: 0;
  }
  .move-enter-active {
   transition: all 1s
  }
  .move-leave-active {
   transition: all 3s
  }
  .move-enter, .move-leave-to {
   opacity: 0;
   transform: translateX(20px)
  }
 </style>
</head>
<body>
<!--
1. vue动画的理解
 操作css的trasition或animation
 vue会给目标元素添加/移除特定的class
2. 基本过渡动画的编码
 1). 在目标元素外包裹<transition name="xxx">
 2). 定义class样式
  1>. 指定过渡样式: transition
  2>. 指定隐藏时的样式: opacity/其它
3. 过渡的类名
 xxx-enter-active: 指定显示的transition
 xxx-leave-active: 指定隐藏的transition
 xxx-enter: 指定隐藏时的样式
-->
<div id="demo">
 <button @click="show = !show">Toggle</button>
 <transition name="xxx">
  <p v-show="show">hello</p>
 </transition>
</div>
<hr>
<div id="demo2">
 <button @click="show = !show">Toggle2</button>
 <transition name="move">
  <p v-show="show">hello</p>
 </transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
 new Vue({
  el: '#demo',
  data: {
   show: true
  }
 })
 new Vue({
  el: '#demo2',
  data: {
   show: true
  }
 })
</script>
</body>
</html>

过滤器

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>11_过滤器</title>
</head>
<body>
<!--
1. 理解过滤器
 功能: 对要显示的数据进行特定格式化后再显示
 注意: 并没有改变原本的数据, 可是产生新的对应的数据
2. 编码
 1). 定义过滤器
  Vue.filter(filterName, function(value[,arg1,arg2,...]){
   // 进行一定的数据处理
   return newValue
  })
 2). 使用过滤器
  <div>{{myData | filterName}}</div>
  <div>{{myData | filterName(arg)}}</div>
-->
<!--需求: 对当前时间进行指定格式显示-->
<div id="test">
 <h2>显示格式化的日期时间</h2>
 <p>{{time}}</p>
 <p>最完整的: {{time | dateString}}</p>
 <p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script>
 // 定义过滤器
 Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {
  return moment(value).format(format);
 })
 new Vue({
  el: '#test',
  data: {
   time: new Date()
  },
  mounted () {
   setInterval(() => {
    this.time = new Date()
   }, 1000)
  }
 })
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>12_指令_自定义指令</title>
</head>
<body>
<!--
1. 注册全局指令
 Vue.directive('my-directive', function(el, binding){
  el.innerHTML = binding.value.toupperCase()
 })
2. 注册局部指令
 directives : {
  'my-directive' : {
    bind (el, binding) {
     el.innerHTML = binding.value.toupperCase()
    }
  }
 }
3. 使用指令
 v-my-directive='xxx'
-->
<!--
需求: 自定义2个指令
 1. 功能类型于v-text, 但转换为全大写
 2. 功能类型于v-text, 但转换为全小写
-->
<div id="test">
 <p v-upper-text="msg"></p>
 <p v-lower-text="msg"></p>
</div>
<div id="test2">
 <p v-upper-text="msg"></p>
 <p v-lower-text="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
 // 注册一个全局指令
 // el: 指令所在的标签对象
 // binding: 包含指令相关数据的容器对象
 Vue.directive('upper-text', function (el, binding) {
  console.log(el, binding)
  el.textContent = binding.value.toUpperCase()
 })
 new Vue({
  el: '#test',
  data: {
   msg: "I Like You"
  },
  // 注册局部指令
  directives: {
   'lower-text'(el, binding) {
    console.log(el, binding)
    el.textContent = binding.value.toLowerCase()
   }
  }
 })
 new Vue({
  el: '#test2',
  data: {
   msg: "I Like You Too"
  }
 })
</script>
</body>
</html>

本文主要介绍了vue常用指令代码实例，更多关于vue常用指令请查看下面的相关链接

vue常用指令代码实例总结

- Author -

爪白白

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
下载安装setuptool和pip linux安装pip    
Jan 24 Python
python使用xauth方式登录饭否网然后发消息
Apr 11 Python
使用wxPython获取系统剪贴板中的数据的教程
May 06 Python
python实现备份目录的方法
Aug 03 Python
pip安装时ReadTimeoutError的解决方法
Jun 12 Python
python面试题小结附答案实例代码
Apr 11 Python
简单了解django缓存方式及配置
Jul 19 Python
python循环输出三角形图案的例子
Nov 22 Python
python实现局域网内实时通信代码
Dec 22 Python
django rest framework serializer返回时间自动格式化方法
Mar 31 Python
关于Python中*args和**kwargs的深入理解
Aug 07 Python
Python实现批量自动整理文件
Mar 16 Python
django-利用session机制实现唯一登录的例子
Mar 16 #Python
python安装dlib库报错问题及解决方法
Mar 16 #Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
Mar 16 #Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
Mar 16 #Python
Python3.6 中的pyinstaller安装和使用教程
Mar 16 #Python
python pandas利用fillna方法实现部分自动填充功能
Mar 16 #Python
Python Flask上下文管理机制实例解析
Mar 16 #Python
data(4) OVERLORD(1) mysql(6) 数据表(1) name_scope (1) character(1) 字符集(1) variable_scope(1) Keras(3) 神经网络(7)
You might like
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
微信小程序 数组（增，删，改，查）等操作实例详解
2017/01/05 Javascript
Move.js入门
2017/02/08 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Python实现随机选择元素功能
2017/09/14 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
pytorch进行上采样的种类实例
2020/02/18 Python
基于python实现地址和经纬度转换
2020/05/19 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
如何清空python的变量
2020/07/05 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
资生堂美国官网：Shiseido美国
2016/09/02 全球购物
外包公司软件测试工程师
2014/11/01 面试题
一道输出判断型Java面试题
2014/10/01 面试题
优秀求职信范文分享
2013/12/19 职场文书
优良学风班总结材料
2014/02/08 职场文书
物理研修随笔感言
2014/02/14 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
北京申奥口号
2014/06/19 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书