Vue指令文件-阿里云开发者社区

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Vue测试</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!--混入实例-->
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  <!--CDN-->
  <!--<script src="https://vuejs.org/js/vue.min.js"></script>-->
  <!--<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->
  <!--自定义过渡-->
  <!--<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">-->
  <!--Velocity.js-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
  <!--Vue.js Ajax-->
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <!--异步加载-->
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <style>
    .class1 {
      background: #7c1212;
      color: #0b5b98;
    }
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .fade-enter-active, .fade-leave-active {
      transition: opacity 2s
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */
    {
      opacity: 0
    }
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    /*CSS 过渡*/
    .slide-fade-enter-active {
      transition: all .3s ease;
    }
    .slide-fade-leave-active {
      transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
      /* .slide-fade-leave-active 用于 2.1.8 以下版本 */
    {
      transform: translateX(10px);
      opacity: 0;
    }
    /*CSS 动画*/
    .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="app">
  <!--获取变量值-->
  <p>{{ message }}</p>
  <p>{{ url }}</p>
  <p>{{detail()}}</p>
  <!--v-html指令：用于输出html代码；-->
  <p v-html="content"></p>
  <!--v-bind指令：绑定HTML属性中的值，v-bind:后跟属性名，在data里再设置该内容，例：v-bind:href="url"，可以缩写为:href="url"；-->
  <label for="r1">修改颜色</label><!--label标签为 input 元素定义标记，for属性与id相同-->
  <input id="r1" type="checkbox" v-model="use">
  <p v-bind:class="{'class1':use}">{{red}}</p>
  <!--v-if指令：当v-if="true"时执行标签里面的内容；-->
  <template v-if="ok">
    <p>if为true时显示</p>
  </template>
  <!--被包围在 pre 元素中的文本通常会保留空格和换行符-->
  <pre>
        <!--v-bind:href可以缩写为:href-->
        <a :href="url">Runoob官网</a>
    </pre>
  <!--双向数据绑定：input框内容改变影响上面message的内容
  比如在input、select、textarea、checkbox、radio等表单控件-->
  <input v-model="message"><br>
  <!--按钮监听DOM事件，v-on:click可以缩写为@click-->
  <button v-on:click="reverseMessage">反转字符串</button>
  <!--过滤器：使用管道符|标识，后面的过滤器函数对第一个参数进行操作；-->
  <p>字符串首字母转大写：{{message|capitalize}}</p>
  <!--if-else-if语句-->
  <p v-if="number > 0.5">随机数大于0.5</p>
  <p v-else-if="number === 0.5">随机数等于0.5</p>
  <p v-else="number < 0.5">随机数小于0.5</p>
  <!--v-show指令：类似于if语句，当v-show="true"时执行标签里面的内容；-->
  <h1 v-show="ok">展示内容</h1>
  <!--for循环遍历：遍历map集合请做参考-->
  <ol>
    <li v-for="site in sites">{{site.name}}：{{site.age}}</li>
  </ol>
  <p>{{reverseMessage3}}</p>
  <!--vm.$watch：监听输入框里的内容，另一个输入框接着改变内容；-->
  <p style="font-size: 25px">计数器：{{counter}}</p>
  <button @click="counter++" style="font-size: 25px">点我</button>
  <!--内联style样式，不推荐使用，经常使用一个变量来设置-->
  <p :style="{color:activeColor,fontSize:fontSize+'px'}">菜鸟教程</p>
  <button @click="say('Hello')">问候</button>
  <!--事件修饰符：带点后的内容-->
  <button @click.once="say('Hello')">问候只能点击一次</button>
  <!--<button>点击enter问候</button>-->
  <input @keyup.enter.space="say('Hello')" placeholder="选中输入框点击enter或者spce问候">
  <p>单选框：</p>
  <input id="java" type="radio" value="Java" v-model="radioName">
  <label for="java">Java</label>
  <input id="python" type="radio" value="Python" v-model="radioName">
  <label for="python">Python</label>
  <input id="c++" type="radio" value="C++" v-model="radioName">
  <label for="c++">C++</label><br>
  <span>选择的单选框内容为：{{radioName}}</span>
  <p>多个复选框：</p>
  <input id="java1" type="checkbox" value="Java" v-model="checkboxName">
  <label for="java1">Java</label>
  <input id="python1" type="checkbox" value="Python" v-model="checkboxName">
  <label for="python1">Python</label>
  <input id="c++1" type="checkbox" value="C++" v-model="checkboxName">
  <label for="c++1">C++</label><br>
  <span>选择的复选框内容为：{{checkboxName}}</span><br>
  <!--下拉选框-->
  <select name="webSite" v-model="selectedName">
    <option value="">请选择一个网站</option>
    <option value="www.csdn.com">CSDN</option>
    <option value="www.github.com">GitHub</option>
  </select>
  <p>选择的网站为：{{selectedName}}</p>
  <!--全局组件-->
  <runoob></runoob>
  <p>页面加载后，input元素自动获取焦点：</p>
  <input v-focus>
  <p v-runoob="{color:'green',text:'菜鸟教程！'}"></p>
  <!--设置路由-->
  <!--<p>
      <router-link to="/foo">Go to foo</router-link>
      <router-link to="/bar">Go to bar</router-link>
  </p>
  <router-view></router-view>-->
  <!--过渡组件-->
  <button v-on:click="show=!show">Velocity动画点我</button>
  <!--过渡-->
  <!--<transition name="fade">-->
  <!--CSS 过渡-->
  <!--<transition name="slide-fade">-->
  <!--CSS 动画-->
  <!--<transition name="bounce">-->
  <!--自定义过渡-->
  <!--<transition
          name="custom-classes-transition"
          enter-active-class="animated tada"
          leave-active-class="animated bounceOutRight"
  :duration="{enter:500,leave:800}">--><!--定制进入和移出的持续时间-->
  <!--JS钩子：要在methods中编写对应的方法-->
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-show="show" v-bind:style="styleobj">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
  </transition>
  <hr>
  <!--axios：遍历json中的字段-->
  <div v-for="site in info">
    {{site.File_newName}}
  </div>
  <input type="button" @click="get()" value="点我异步获取数据(Get)">
  <p style="font-size: 25px">计数器：{{products.id}}</p>
  <button @click="products.id++" style="font-size: 25px">set设值点我</button>
</div>
<script>
  Vue.directive('runoob', function (el, binding) {
    /*简写方式设置文本及背景颜色*/
    el.innerHTML = binding.value.text
    el.style.backgroundColor = binding.value.color
  })
  /*注册一个全局自定义指令 v-focus*/
  /*Vue.directive('focus',{
      /!*当绑定元素插入到 DOM 中*!/
      inserted:function (el) {
          /!*聚焦元素*!/
          el.focus()
      }
  })*/
  /*必须放到vue变量之前*/
  Vue.component('runoob', {
    template: '<h1>全局组件!</h1>'
  })
  var myproduct = {"id": 1, name: "book", "price": "20.00"};
  /*使用vm调用变量和直接调用变量一样，为了方便都是直接调用，不使用vm来调用*/
  var data = {
    message: 'this a variable',
    url: 'http://www.runoob.com',
    content: '<h1>html输出内容</h1>',
    red: '我会变颜色',
    use: false,
    ok: true,
    number: Math.random(),
    sites: [
      {name: 'Java', age: '8'},
      {name: 'Python', age: '8'},
      {name: 'C++', age: '8'},
      {name: '.Net', age: '8'}
    ],
    counter: 1,
    activeColor: 'red',
    fontSize: 25,
    radioName: '',
    checkboxName: [],
    selectedName: '',
    show: true,
    styleobj: {
      fontSize: '30px',
      color: 'red'
    },
    info: null,
    products: myproduct
  }
  var vm = new Vue({
    el: '#app',
    /*给变量设置内容*/
    data: data,
    computed: {
      reverseMessage3: function () {
        return 'reverseMessage3';
      }
    },
    methods: {
      detail: function () {
        return 'details';
      },
      reverseMessage() {
        this.message = this.message.split('').reverse().join('');
      },
      say(letter) {
        alert(letter)
      },
      /*Velocity.js方法*/
      beforeEnter: function (el) {
        el.style.opacity = 0
        el.style.transformOrigin = 'left'
      },
      enter: function (el, done) {
        Velocity(el, {opacity: 1, fontSize: '1.4em'}, {duration: 300})
        Velocity(el, {fontSize: '1em'}, {complete: done})
      },
      leave: function (el, done) {
        Velocity(el, {translateX: '15px', rotateZ: '50deg'}, {duration: 600})
        Velocity(el, {rotateZ: '100deg'}, {loop: 2})
        Velocity(el, {
          rotateZ: '45deg',
          translateX: '30px',
          translateY: '30px',
          opacity: 0
        }, {complete: done})
      },
      get: function () {
        /*http://localhost:63342/try/ajax/ajax_info.txt*/
        this.$http.get('/try/ajax/ajax_info.txt').then(function (res) {
          document.write(res.body);
        }, function () {
          console.log('请求失败处理');
        });
      }
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    },
    directives: {
      /*注册一个全局自定义指令 v-focus*/
      focus: {
        /*当绑定元素插入到 DOM 中*/
        inserted: function (el) {
          /*聚焦元素*/
          el.focus()
        }
      }
    },
    /*axios*/
    /*axiosData() {
        return {
            info: null
        }
    },*/
    mounted() {
      axios
        .get('https://www.91cht.com/woxiang/control/bapi?operFlag=showStoreImg&Meta_storeNo=06096519')
        .then(response => (this.info = response.data.StoreImgList)
    ).catch(function (error) { // 请求失败处理
        console.log(error);
      });
    }
  })
  document.write(vm.url === data.url) // true
  document.write('</br>')//换行
  /*$表示获取冒号前的内容*/
  document.write(vm.$data === data) // true
  vm.$watch('counter', function (dest, source) {
    alert('原来的值：' + source + '，变为：' + dest);
  });
  /*setTimeout 设置 10 秒后计算器的值加上 20*/
  setTimeout(function () {
    vm.counter += 20;
  }, 10000);
  /*定义路由*/
  /*const Foo={template:'<div>foo</div>'}
  const Bar={template:'<div>bar</div>'}
  /!*定义路由组件*!/
  const routes=[
      {path:'/foo',component:Foo},
      {path:'/bar',component:Bar}
  ]
  const router=new VueRouter({
      routes
  })
  const app = new Vue({
      router
  }).$mount('#app')*/
  /*定义一个混入对象*/
  var myMixin = {
    created: function () {
      this.startmixin()
    },
    methods: {
      startmixin: function () {
        document.write('<br>' + '欢迎来到混入实例');
      }
    }
  };
  var Component = Vue.extend({
    mixins: [myMixin]
  })
  var component = new Component();
  // vm.products.qty = '1';
  /*set方式设置值*/
  Vue.set(myproduct, 'name', 'xhy');
  console.log(vm);
  Vue.delete(myproduct, 'price');
  console.log(vm);
  vm.$watch('products.id', function (nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
  });
</script>
</body>
</html>
Vue指令文件

热门文章

最新文章

相关课程

相关电子书
