VUE JS 学习

最新推荐文章于 2023-08-19 20:19:22 发布

静山晚风

最新推荐文章于 2023-08-19 20:19:22 发布

阅读量373

点赞数

分类专栏： Vue & Angular & React & JS

本文链接：https://blog.csdn.net/cgwcgw_/article/details/81049811

版权

Vue & Angular & React & JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 字符串逆序对方法：

这个是个小技巧，因为数组有逆序方法，借用了一下数组

‘abcde'.split('').reverse().join('')

2 在线编辑学习网站，在线编程

http://jsbin.com/joxinumota/edit?html,js,console,output

add library,需要google浏览器

3 新增了 Symbol原子类型，目前不知道用途。

4 vue 的slot

1 指定了slot才会在父组件显示

2 可以指定具体姓名，app.component.name-'xxx' 对应父组件 <span slot='second'>

3 可以指定作用域就是例如同一个button，下面两个 slot，第一个slot 有单机事件，第二个没有，则点前一半就触发，后一个不触发，感觉很鸡肋的功能

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue.js wrapper component example (jquery plugin: select2)</title>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../../dist/vue.min.js"></script>

    <style>
      html, body {
        font: 13px/18px sans-serif;
      }
      select {
        min-width: 300px;
      }
    </style>
  </head>
  <body>
  <div id="app">
    <children>
      <span slot="first" @click="tobeknow">12345</span>
      <span slot="second">56789</span>
      <!--上面这行不会显示-->
    </children>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      methods: {
        tobeknow: function () {
          console.log("It is the parent's method");
        }
      },
      components: {
        children: {    //这个无返回值，不会继续派发
          template: "<button><slot name='first'></slot>为了明确作用范围，<slot name='second'></slot>所以使用button标签</button>"
        }
      }
    });
  </script>
  </body>
</html>

4 没有内容分发到提示：就是把各种情况都考虑到了，特殊情况，有用父类的填充，没有就用子类的填充

<div id="app">  
    <children>  
        <span slot="first">【12345】</span>  
        <!--上面这行不会显示-->  
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {    //这个无返回值，不会继续派发  
                template: "<div><slot name='first'><button>【如果没有内容则显示我1】</button></slot>为了明确作用范围，<slot name='last'><button>【如果没有内容则显示我2】</button></slot>所以使用button标签</div>"  
            }  
        }  
    });  
</script>

5 vue支持es5以上，所以ie8以下不支持，vue 的计算属性可以在 {{}} 中计算，也可以在computed属性下加上属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vue.js wrapper component example (jquery plugin: select2)</title>
  <!-- Delete ".min" for console warnings in development -->
  <script src="../../dist/vue.min.js"></script>

  <style>
    html, body {
      font: 13px/18px sans-serif;
    }
    select {
      min-width: 300px;
    }
  </style>
</head>
<body>
<div id="app">
  {{'mygood'.split('').reverse().join('')}},
  {{message}}},{{newmessage}}
</div>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      message:'mygood'
    },
    computed:{
      newmessage:function(){
        return this.message.split('').reverse().join('');
      }
    }
  });
</script>
</body>
</html>

5 watch方法经过测试，watch方法和方法没有关系，和，可能会自动调用方法，但是监听的主要是value，和方法用来计算使用

<div id = "computed_props">
  千米 : <input type = "text" v-model = "kilometers">
  米 : <input type = "text" v-model = "meters">
  fenmi: <input type="text" v-model="fenmi"/>
</div>
<p id="info"></p>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#computed_props',
    data: {
      kilometers : 0,
      meters:0,
      fenmi:0
    },

    watch : {
      kilometers:function(val) {
        this.kilometers = val;
        this.meters = val * 1000;
      },
      meters : function (val) {
        this.kilometers = val/ 1000;
        this.meters = val;
      },
      fenmi:function(a){
//        this.kilometers = a/ 1000/1000;
//        this.meters = a/1000;
      }
    }
  });
  // $watch 是一个实例方法
  vm.$watch('kilometers', function (newValue, oldValue) {
    // 这个回调将在 vm.kilometers 改变后调用
    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
  })
  vm.$watch('fenmi',function(a,b){
    document.getElementById ("info").innerHTML=a+":"+b;
  })

6 使用v-bind 绑定class

    <style>
        .class1{
            color:red;
        }
    </style>
    testclss:<input type="checkbox" v-model="class1"/>
    <div v-bind:class="{'class1':class1}">helllowrld</div>
    <div v-bind:class="{'class1': class1}">
        directiva v-bind:class
    </div>
	
	    new Vue({
        el: '#app',
        data: function() {
            return { 
                class1:false
            }
        }
    })

4 组件功能：分全局和，局部组件（定义在了具体 new Vue里面）

全局组件很特殊，必须用小写，大写有时显示不出来

  <realcom></realcom>

  Vue.component('realcom',{
    template: '<h1 >世界你好</h1>'
  });

子模板特点：记得在 components下的json数据里template

    components:{
      'selfdef': {template:'<h5>goodlife</h5>'}
    },

5 同一个页面可以使用多个vue，已测试通过

静山晚风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE JS 学习

1 字符串逆序对方法：这个是个小技巧，因为数组有逆序方法，借用了一下数组 ‘abcde'.split('').reverse().join('')2 在线编辑学习网站，在线编程http://jsbin.com/joxinumota/edit?html,js,console,outputadd library,需要google浏览器3 新增了 Symbol原子类型，...
复制链接

扫一扫