Vue的学习（3）

最新推荐文章于 2024-05-29 17:10:32 发布

写bug的小气球

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量149

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46013619/article/details/103889780

版权

Vue 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

绑定监听事件修饰符事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="demo">
默认事件形参: event
隐含属性对象: $event
  <h2>1. 绑定监听</h2>
  <button @click="test1">test1</button>
  <button @click="test2('demo')">test2</button>
  <button @click="test3($event)">test3</button>
  <button @click="test4(123,$event)">test4</button>

  <h2>2. 事件修饰符</h2>
  <!--//停止冒泡-->
  <div style="width: 200px;height: 200px;background: red;" @click="test5">
    <div style="width: 100px;height: 100px;background: blue;" @click.stop="test6"></div>
  </div>
<!--//阻止默认行为-->
  <a href="http://www.baidu.com" @click.prevent="test7">去百度</a>
<!--//想不住写名字.enter  不是所有的都有，得写对应数字-->
  <h2>3. 按键修饰符</h2>
  <input type="text" @keyup.enter="test8">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el:'#demo',
    data:{
      test1(){
        alert('test1()')
      },
      test2(msg){
        alert(msg)
      },
      test3(event){
        alert(event.target.innerHTML)
      },
      test4(num, event){
        alert(num + '------' + event.target.innerHTML)
      },
      test5(){
        alert('out')
      },
      test6(){
        alert('inner')
      },
      test7(){
        alert('点击了')
      },
      test8(event){
        alert(event.target.value)
      }
    },
    methods:{

    }
  })
</script>
</body>
</html>

使用v-model(双向数据绑定)自动收集数据

<!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">
  <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>

这里因为刚接触Vue有时候会困惑v-model到底怎么使用，特别是在下拉选项那，说说我仔细思考后的想法，首先要明白这是双向绑定，也就是说我动外面的内容里面会改变，动里面外面会改变，下拉那里，其实和username那里一样，就看成输入框里的内容改变了嘛，另外要明白在表单中v-model读的是value，然后去data中，把对应的值改变，就很容易理解了

Vue生命周期简单理解，后面源码再说

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="text">
  <button @click="destoryVM">destroy vm</button>
  <p v-show="isShow">Vue 生命周期</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  // <!--
  // 1. vue对象的生命周期
  // 1). 初始化显示
  // * beforeCreate()
  // * created()
  // * beforeMount()
  // * mounted()
  // 2). 更新状态
  // * beforeUpdate()
  // * updated()
  // 3). 销毁vue实例: vm.$destory()
  // * beforeDestory()
  // * destoryed()
  // 2. 常用的生命周期方法
  // created()/mounted(): 发送ajax请求, 启动定时器等异步任务
  // beforeDestory(): 做收尾工作, 如: 清除定时器
  // -->
  new Vue({
    el:'#text',
    data:{
      isShow:true,
    },
    // 1.初始化显示
    beforeCreate(){
      console.log('beforeCreate()')
    },
    created(){
      console.log('created()')
    },
    beforeMount(){
      console.log('beforeMount()')
    },
    mounted(){//初始化显示之后立即调用（1次）
      console.log('mounted()')
      this.intervarId = setInterval(() => {
        console.log('111111')
        // 这里有一点很妙，这里的this不是vm，是window，定时器没有特别的指向时
        // 默认会指向window，我第一想法是bind,后来视频突然说到箭头函数上
        //使用箭头函数，this就很棒，指向嵌套它的外面函数的this，那不就是vm么
        this.isShow = !this.isShow
        // return this.isShow
      },1000)
    },
    // 2.更新阶段
    beforeUpdate(){
      console.log('beforeUpdate()')
    },
    updated(){
      console.log('updated()')
    },
    // 3.死亡阶段
    beforeDestroy(){//死亡之前调用一次
      console.log('beforeDestroy()')
      //清除定时器
      clearInterval(this.intervarId)
    },
    destroyed(){
      console.log('destroy()')
    },

    methods:{
      destoryVM(){
        //干掉vm
        this.$destroy()
      }
    }
  })
</script>
</body>
</html>

过渡and动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /*指定显示/隐藏的过滤效果*/
    .xxx-enter-active, .xxx-leave-active{
      transition: opacity 1s;
    }
    /*隐藏时的样式*/
    .xxx-enter , .xxx-leave-to{
      opacity: 0;
    }
    /*显示的过滤效果*/
    .yyy-enter-active{
      transition: all 1s;
    }
    /*隐藏的过滤效果*/
    .yyy-leave-active{
      transition: all 3s;
    }
    /*隐藏时的样式*/
    .yyy-enter , .yyy-leave-to{
      opacity: 0;
      transform: translateX(20px);
    }
  </style>
</head>
<body>
//看图，分成两个阶段
<div id="demo">
  <button @click="isShow = !isShow">切换</button>
  <transition name="xxx">
    <p v-show="isShow">hello</p>
  </transition>
</div>

<div id="demo1">
  <button @click="isShow = !isShow">切换</button>
  <transition name="yyy">
    <p v-show="isShow">hello</p>
  </transition>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el:'#demo',
    data(){
      return {
        isShow: true,

      }
    }
  })
  new Vue({
    el:'#demo1',
    data(){
      return {
        isShow: true,

      }
    }
  })
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>10_过渡&动画2</title>
  <style>
    .bounce-enter-active {
      animation: bounce-in .5s;
    }
    .bounce-leave-active {
      animation: bounce-in .5s reverse;/*相反*/
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
  </style>
</head>
<body>

<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <br>
  <transition name="bounce">
    <p v-if="show" style="display: inline-block">Lorem</p>
  </transition>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script>
  new Vue({
    el: '#example-2',
    data: {
      show: true
    }
  })
</script>
</body>
</html>

过滤器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="test">
  <h2>显示格式化的日期时间</h2>
  <p>{{date}}</p>
  <p>完整版：{{date | dateStr}}</p>
  <p>年月日: {{date | dateStr('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.21.0/moment.js"></script>
<script type="text/javascript">
  //自定义过滤器  Vue函数对象
  //过滤器会怎么工作，首先先找到定义的过滤器dataStr，
  // 然后把date作为value传进去，将结果返回
  // Vue.filter('dateStr', function (value, format) {
  // //这是一种   还有一种用ES6的形参默认值，如果没传就默认值，如果传了，就新值
  //   return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss ')
  // })
  Vue.filter('dateStr', function (value, format = 'YYYY-MM-DD HH:mm:ss ') {
    //这是一种   还有一种用ES6的形参默认值，如果没传就默认值，如果传了，就新值
    return moment(value).format(format)
  })
  new Vue({
    el:'#test',
    data:{
      date:new Date()
    },
    mounted() {
      setInterval(() => {
        this.date = new Date()
      },1000)
    }
  })
</script>
</body>
</html>

指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-clock]{/*//属性选择器  ，先隐藏，解析前还在，解析后没了*/
      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="demo">
    <p ref="content">Vue的学习</p>
    <button @click="hint">提示</button>
    <p v-cloak>{{msg}}</p>
  </div>


<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el:"#demo",
    data:{
      msg:'Vue的学习'

    },
    methods:{
      hint() {
        alert(this.$refs.content.innerHTML)
      }
    }
  })
</script>
</body>
</html>

自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义指令</title>
</head>
<body>
<!--
需求: 自定义2个指令
  1. 功能类型于v-text, 但转换为全大写
  2. 功能类型于v-text, 但转换为全小写
-->
<div id="text">
  <p v-upper-text="msg"></p>
  <p v-lower-text="msg"></p>
</div>

<div id="text1">
  <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">
  //定义全局指令
  //第一个参数是指令，指令不带v，注意！
  //第二个是个函数
  //el：指令属性所在的标签对象
  //binding：包含指令相关信息的数据对象
  Vue.directive('upper-text', function (el, binding) {
    console.log(el, binding)
    el.textContent = binding.value.toUpperCase()
  })

  new Vue({
    el:'#text',
    data:{
      msg:'I go Here'
    },
    directives:{
      //注册局部指令  在当前范围有效
      //属性名这种情况还带单引号，因为中间有-
      //ES6简洁语法
      'lower-text'(el, binding) {
        el.textContent = binding.value.toLowerCase()
      }
    }
  })
  new Vue({
    el:'#text1',
    data:{
      msg:'this World'
    }
  })
</script>
</body>
</html>

插件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>17_插件</title>
</head>
<body>

<div id="test">
  <p v-my-directive="msg"></p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="vue-myPlugin.js"></script>
<script type="text/javascript">
  // 声明使用插件(安装插件: 调用插件的install())
  Vue.use(MyPlugin) // 内部会调用插件对象的install()

  const vm = new Vue({
    el: '#test',
    data: {
      msg: 'HaHa'
    }
  })
  Vue.myGlobalMethod()
  vm.$myMethod()

  new Object()
</script>
</body>
</html>

(function (window) {
  const MyPlugin = {}
  MyPlugin.install = function (Vue, options) {
    // 1. 添加全局方法或属性
    Vue.myGlobalMethod = function () {
      console.log('Vue函数对象的myGlobalMethod()')
    }

    // 2. 添加全局资源
    Vue.directive('my-directive',function (el, binding) {
      el.textContent = 'my-directive----'+binding.value
    })

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {
      console.log('vm $myMethod()')
    }
  }
  window.MyPlugin = MyPlugin
})(window)