vue练习02

作者: 6e5e50574d74 | 来源:发表于2018-10-25 21:46 被阅读0次

vue练习02
2018-09-11 Vue day01
Vue.js 第一课
vue2 基础学习02 （Vue组件）
vue组件生命周期挂载顺序
书法练习02
vue02
03.Element UI 之安装使用（npm）
vue父组件给子组件传值方法
详情页首屏如何设计|新手练习03

1.vue_resource_get//不能使用post

<body>
    <div id="app">
        <button 
            @click = "get"
        >
            get
        </button>
        <ul>
            <li v-for = " (v,i) in list " :key='i'>
                {{v}}
            </li>
        </ul>
    </div>
    <script src="./base/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
    <script>
        // 使用$http的方式绑定在了 Vue实例身上
        new Vue({
            el:'#app',
            data:{
                list:[]
            },
            methods:{
                get(){
                    //获取数据的
                    this.$http.get('./json/temp.json').then(res => {
                        this.list = res.body.books;
                    })
                }
            }
        })
    //   从vue2.0开始，将不对vue-resource进行维护，推荐使用axios
    </script>
</body>

2.vue_resource_jsonp

<body>
    <div id="app">
        <input @keyup.enter = "get" type="text" v-model = "title">
        <ul>
            <li v-for = " book in books " :key = "book.id">{{book}}</li>
        </ul>
    </div>
    <script src="./base/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
    // https://login.taobao.com/member/login.jhtml?redirectURL=http://s.taobao.com/search?q=%E8%A1%A3%E6%9C%8D&imgfile=&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&spm=a21bo.2017.201856-taobao-item.1&ie=utf8&initiative_id=tbindexz_20170306
    // http://suggest.taobao.com/sug?code=utf-8&q=商品关键字&callback=cb
    // https://api.douban.com/v2/book/search
        
        new Vue({
            el:'#app',
            data:{
                title:'',
                books:[]
            },
            methods:{
                get(){
                    // //vue-resource jsonp写法
                    //     // https://api.douban.com/v2/book/search?q="动作电影"
                    //     this.$http.jsonp('https://api.douban.com/v2/book/search',{
                    //         params:{
                    //             q:this.title
                    //         }
                    //     }).then(res=>{
                    //         this.books = res.body.books ;
                    //     })\
                    // axios
                    axios.get('./json/temp.json').then(res=>{
                        console.log(res)
                    })
                }
            }
        })
    // vue2.0 之后放弃了vue-resource的更新和维护   现阶段使用了另一个第三方的插件 axiso
    //为什么要动态创建：因为一个script只能用一次
    //为什么要使用script标签，不用img呢，不都有src吗？
    //因为jsonp请求回来的数据是要放到回调函数里的，所以后端会返回一段执行函数并传入参数的字符串
    //注意的地方：用完script标签删除掉，回调函数一定要是全局函数，
    //jsonp缺点：不能post
    </script>
</body>

3.vue_v_cloak

<style>
    [v-cloak]{
        /* display:none; */
        visibility: hidden;
    }
</style>
<body>
    <div id="app">
        <p v-cloak>
            {{msg}}
        </p>
    </div>
    <script src="./base/vue.js"></script>
    <script>
        // 添加了 v-cloak 这个属性之后，我们可以解决 {{}} mustach 语法导致的 闪屏现象
        new Vue({
            el:'#app',
            data:{
                msg:'yyb'
            }
        })
    </script>
</body>

4.vue_v_text

<body>
    <div id="app">
        <p v-text='msg'>
            {{msg}}
        </p>
        <div v-text='text'>
        </div>
    </div>
    <script src="./base/vue.js"></script>
    <script>
    //  v-text指令就相当于 mustach语法  它绑定是 innerText 这个指令是不能解析标签的
      new Vue({
          el:'#app',
          data:{
              msg:'今天是程序员日',
              text:'<h3>去年的某宝的搜索滚屏现象</h3>'
          }
      })
    </script>
</body>

5.vue-v-html

<body>
    <div id="app">
        <p v-html="mes"></p>
    </div>
    <script src="./base/vue.js"></script>
    <script>
      //v-htmlヘv-text唯一的区别就是可以解析标签，慎用，性能耗费比v-text高
      var vm = new Vue({
          el:"#app",
          data:{
             mes:'<h1>hello world</h1>'
          },
          methods:{
            
          }
      })
    /*  v-text 和 v-html的区别
        1. v-html是可以解析标签的，而v-text 不能
        2. v-html性能损耗比较高，不建议使用 v-html ，将来肯定会出现标签的模板，vue使用的解决方法是 组件 / template*/
    </script>
</body>

6.vue-watch

<body>
    <div id="app">
        <input type="text" v-model = 'msg'>
        {{msg}}
    </div>

    <script src="./base/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'yyb',
                data:[]
            },
            watch:{
                // 监听  基本属性（data选项中的变量） 性能损耗很厉害
                msg(){
                    console.log('msg已经发生了改变');
                }
            },
            computed:{
                bb(){
                    return this.data;
                }
            }
        })  
    // 数据类型：number,string,boolean,undefined,null,object,array,function
    // 简单和复杂类型；基本类型和引用类型；初始类型和引用类型
    // 初始类型：number,string,boolean,undefined,null
    // 引用类型：object、array、function
    // 分类的依据是：在内存中存储的位置及赋值特性
    // 在电脑中，内存分为两种：CPU内存（运行内存）、存储内存(硬盘内存)
    // 硬盘内存是比较傻的，不能进行逻辑运算，只能存储数据、文件
    // 当我们打开一个应用程序的时候就会创建若干个进程，每一个进程又会创建若干个线程，这些玩意儿都是运行在CPU内存里的，都会占用CPU的内容
    // CPU内存的格局：分为四个区域：堆、栈、代码段、静态区
    // js在运行的过程中，所有的变量、函数、数据都会存到CPU中对应的某些位置
    // 变量、初始类型的数据都会存在栈里
        // var a = 1;
        // var b = a; //值传递
        // b++;
        // alert(a)
        // var c = [1,2,3,4];
        // var d = c;// 地址传递 // 引用关系
        // d.push(5)
        // console.log(c)
        // watch 是用来监听一个数据的变化，变化之后做一些操作
        // 计算属性是压迫根据现有的数据派生一个新的数据。并且他们直接有联系，还有缓存，无关数据变化不影响....
    </script>
</body>

7.repaint_and_reflow(回流和重绘)

<body>
    <button id="btn">delete</button>
    <div class="box"></div>
    <div class="box"></div>
    <div id="odiv" class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
<script>
   var btn = document.querySelector('#btn') ;
   var oDiv = document.querySelector('#odiv')
    // 回流
    // btn.onclick = function(){
    //     oDiv.className = ''
    // }

    // 重绘
    btn.onclick = function(){
        oDiv.style.display = 'none' ;
    }
    /*
        回流和重绘
            1. 回流：页面结构并未发生改变，但是，页面的样式或是属性发生了新的变化，比如添加某些属性或是删除某些属性
            2. 重绘：重新去加载页面，页面结构发生了改变

            针对性能而言：重绘的性能要优于回流
    */
</script>

8.vue_computed

<body>
    <div id="app">
        姓：<input type="text" v-model='firstName'> <br>
        名：<input type="text" v-model='lastName'>  <br>
        全名： <input type="text" v-model='fullName'>

      <button @click = 'num++'>
        {{num}}
      </button>
    </div>

    <script src="./base/vue.js"></script>
    <script>
      //计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。
      new Vue({
        el:'#app',
        data:{
          firstName:'',
          lastName:'',
          num:1
        },
        watch:{
          num(){
            console.log('ok')
          },
          lastName(){
            console.log('lastName')
          }
        },
        computed:{
          fullName:{
            get(){
              return this.firstName + this.lastName ;
            },
            set(val){
              this.firstName = val.substr(0,1);
              this.lastName = val.substr(1)
            }
          }
        }
      })
  // 计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
 
    </script>
</body>

9.vue_property

<body>
    <div id="app">
      <button @click = "get">get</button>
    </div>
    <script src="./base/vue.js"></script>
    <script>
      var vm = new Vue({
        el:"#app",
        data: {
          num: 1
        },
        version:'zsq',
        methods: {
          get () {
            console.log(this.$data,this.$options)
          }
        }
      })
      // $el  $options   属于实例的配置
    </script>
</body>

10.vue-filter(过滤器）

<body>
    <div id="app">
      <p>
        {{time}}
      </p>

      <p>
        {{time | aa('-')}}
      </p>
    </div>
   
   
    <script src="./base/vue.js"></script>
    <script>
      // 过滤器： 数据格式化， 比如，后端返回我们的数据格式是一个时间戳，在页面中使用的时候需要变成真正的时间格式
      // 在vue中，1.0的时候，自带有10来个过滤器，但是在2.0的时候，一个都不剩，全部干掉，想要用，请自己创建
      // 分为两种：全局过滤器，局部过滤器
      // 记住！一定不要操作原数据!!!!!也就是说，过滤器只是在数据要显示的时候，将数据变化成某种格式
      // 全局：
      // Vue.filter(name,handler)
      // Vue.filter('time',function (value,symbol = '-') {
      //   //接收要过滤的数据，返回一个处理好的数据
      //   let date = new Date(value)
      //   return date.getFullYear()+symbol+(date.getMonth()+1)+symbol+date.getDate()
      // })
        // 12345.6789 -> ￥12,345.68
      new Vue({
        el:'#app',
        data:{
          time:new Date().getTime()
        },
        filters:{
          aa(val,type){
            let date = new Date();
            return date.getFullYear() + type + (date.getMonth()+1) + type + date.getDay()
          }
        }
      })
      /*
        1. filter中是可以传递多个参数的，
        2. 特别注意第一个参数是默认的value值
      */ 
    </script>
</body>

11.vue_v-if-show-else

<body>
    <div id="app">
        <button @click = 'isShow = !isShow'>
          toggle
        </button>
        <div v-if='isShow'>
          你好
        </div>
        <div v-else>
          你不好
        </div>
    </div>
    <script src="./base/vue.js"></script>
    <script>
    /*
      1. v-if 操作的是DOM的存在与否，如果是true,存在， 如果是false,直接消失  直接删除
      2. v-show 操作的DOM的css 样式 display:block/none  DOM是存在的
      3.就性能而言 ： 如果是简单的显示隐藏 ，我们提倡使用v-show
      4. 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
    */ 
     new Vue({
       el: '#app',
       data: {
         isShow:true,
       }
     })
    </script>
</body>

12.vue_mixin

<body>
  <div id="app">
    <button @click='aa'>
      aa
    </button>
    <button @click = 'cc'>
      cc
    </button>
  </div>
    <script src="./base/vue.js"></script>
    <script>
      //在Vue里可以使用mixins来做代码的抽离复用，便于维护
      //一个mixin其实就是一个纯粹的对象，上面挂载着抽离出来的配置，在某一个实例中，通过mixins选项导入后，此实例就拥有导入的mixin的配置
      //并且不会与原配置相互覆盖，而是合并到一起
      
      let mixin = {
        methods:{
          aa(){
            alert('aa')
          },
          bb(){
            alert('bb')
          }
        }
      }
      new Vue({
        el:'#app',
        data:{
        },
        mixins:[mixin],
        methods:{
          cc(){
            alert('cc')
          },
          aa(){
            alert('有一个aa')
          }
        }
      })
    </script>
</body>

vue练习02
1.vue_resource_get//不能使用post 2.vue_resource_jsonp 3.vue_v...
2018-09-11 Vue day01
1、Git2、Vue入门学习（练习）注：先引入vue.js(1)入门练习（2）练习2 （3）练习3
Vue.js 第一课
01. Vue.JS 第一课 02:51 Vue 1.0.21 Sublime Text 1 、vue: 读音: ...
vue2 基础学习02 （Vue组件）
vue2 基础学习02 （Vue组件） vue学习路径和建议----尤雨溪 vue官网 1.Vue组件参考官方文...
vue组件生命周期挂载顺序
title: vue组件挂载顺序date: 2016-12-02 vue组件挂载顺序本文通过实验介绍vue组件的...
书法练习02
书法练习02
vue02
vue02 vue生命周期 1.0钩子函数: created -> 实例已经创建 √ beforeComp...
03.Element UI 之安装使用（npm）
一、创建一个vue新项目（cli方式） |--命令：vue init webpack elementui02 ...
vue父组件给子组件传值方法
src/components 组件 App.vue vuedemo父组件传值02 Header.vue
详情页首屏如何设计|新手练习03
01 练习28 练习29 练习30 练习31 练习32 练习33 练习34 练习35 练习36 02