关于Vue的学习笔记

Vue学习笔记（学习ing）

基础指令

1. v-text 一般写为{{}}

2. v-html 可在页面填充html代码

   <div id="app">
       <p v-html="html"></p>
   </div>
   let app = new Vue({
           el: "#app",
           data: {
               html: "<b style='color:red'>v-html</b>"
           }
       });
   

3. v-on 添加监听事件，可以简写为@…="…"（类型,事件名）

   • 即v-on…和@…等价
   • 传递参数的话，在后面添加括号，写明参数即可

   //html:
   <p @click="demo(canshu)"></p>
   //js:
    let app = new Vue({
           el: "#app",
           methods:{
               demo:function(canshu){
                   ...
               }
           }
       });
   

4. v-show和v-if 判断某个值是否true，true就将这段DOM显示在浏览器中，false则不显示

   • 不同点是v-show是通过修改css中display：none来隐藏，而v-if是通过删去DOM元素来隐藏。
   • 效率上，v-show需要隐藏在很多的DOM时，会比v-if快，因为不操作DOM元素

   //html
   <p v-show="demo"></p>
   <h1 v-if="demo"></h1>
   //js
    let app = new Vue({
           el: "#app",
           data: {
               demo:ture //这样p标签会显示，false则不会，可以在后面的操作中动态修改demo，这样可以使得p标签显示或者隐藏
           }
       });
   

5. v-bind 为属性添加绑定，因为{{}}这种方法在标签属性内部无法实现。可以简写为":"

   • 可以:class{playing:isPlay},这样，playing的class就会由isPlay的true或者是false来决定是否添加这个class

   //html
   <button :class="demo+''+ demo2"></button>
   //js
    let app = new Vue({
           el: "#app",
           data: {
               demo:"button-close"
               demo2:"button-close2"
           }
       });
   //通过这样，button的标签就等同于
   <button class="button-close button-close2"></button>
   

6. v-for,v-for可以依次遍历内容，并且渲染在浏览器上

   • 一般与数组或者对象配合使用
   • 有两个参数(item,index),item是当前项，index是当前项的索引,index是可选，item是必须，对象的话，要记得"."来引用里面的内容，不然会将整个item都渲染进去（包括键值对）
   • item和index可以在属性中引用，但记得要渲染有结果，一定要有item或者index在标签中
   • 渲染的数组会同步更新，即数组内容改变，v-for的渲染也会动态改变

   //html
   <ul>
       <li v-for="(item,index) in demo">
           {{index}}{{item}}
       </li>
   </ul>
   //js
   let app = new Vue({
           el: "#app",
           data: {
               demo:[1,2,3]
           }
       });
   

7. v-model双向绑定，一般用于表单元素

   • 绑定后元素会与输入的内容实时绑定

   //html
   <input type="text" v-model="demo">
   <p>{{demo}}</p>
   //上面的p标签会实时显示input栏输入的内容
   //同时，在js中修改了demo的值也会改变input栏和p标签的值，实现！！！双向绑定！！！
   
   //js
   let app = new Vue({
           el: "#app",
           data: {
               demo:"glows777"  //这样的话，input的没写内容，input输入栏也会显示glows777
           }
       });
   

8. axios异步调用接口

   • 有两种方法，get和post
   • get是"="来赋值参数，而post是用键值对来赋值

自定义组件

1. 用Vue.component('name',{...})来声明全局组件，这样，在html中，可以在任何地方使用

2. 父向子传递参数，通过属性的方式传递，子用props[]接收，而后可以当成值/变量来使用

3. 子向父传递，通过子用传$emit('eventtt',parameter)，父用v-on：eventtt="demo"接收，在父的js的methods中，demo可以接受parameter参数，可以动态传参，父在methods中接受，可传入多个

4. 实现v-model，父组件用v-model，子组件用v-bind:value="value" v-on:input="$emit('input',$event.target.value，这样才能使得子组件的v-model双向绑定

5. 只能有单个根元素，就是说，要用一个div将所有的元素包起来，同时，要避免过于复杂，可以拆成多个组件，这样减小复杂度，提高可读性以及后期维护

6. 有插槽的功能，即可以在自定义组件中使用<slot></slot>做占位符，然后在父组件时插入值

   html部分

   <div id="demo">
       <div :style="{fontSize: postFontSize + 'em'}">
           <!-- <ta-bs valuue="my my 555"></ta-bs>
           <ta-bs valuue="my my 666"></ta-bs>
           <ta-bs valuue="my my 777"></ta-bs> -->
           <!-- <ta-bs v-for="item in posts"
                   :key="item.id"
                   :objj="item.title"
                   :valuue="item.title"
           ></ta-bs> -->
           <ta-bs 
               v-for="item in posts"
               :key="item.id"
               :objj="item.title"
               :valuue="item.title"
               @big="demooo"
               v-model="searchText"
           > are champion</ta-bs>
           <!-- 绑定big事件，方法名为demooo，自动在js的methods中获取 -->
           <!-- are champion作为父组件插入的部分，结果变为weeeeee are champion -->
           <h3>{{searchText}}</h3>
           <h3>{{ddd}}</h3>
       </div>
   </div>
   

   js部分

   Vue.component('ta-bs',{
          props:['valuue','objj','inputt'],//这是定义从父组件接受的数据，下面可以使用
           data:function(){
               return{
                   count:0,
                   
               }
           },
           template:`
           <div>
               <button v-on:click="count++">you have click {{count}}times</button>
               <h3>{{valuue}}</h3>
               <h5>{{objj}}</h5>
               <button v-on:click="$emit('big',0.1,count)">bigbigbig</button>
               <input v-bind:value="value" v-on:input="$emit('input',$event.target.value)"></input>    
               <h3>weeeeee</h3>
               <slot></slot>
           </div>
           `
           //button那个绑定，是传给参数给父元素，绑定big，
           //通过$emit('big',0.1,count),给父元素传递静态0.1，动态count参数，然后父组件在方法中会自动接收
           //<slot></slot>插槽占位符
       })
       
   
       let app = new Vue({
           el:"#demo",
           data() {
               return {
                   posts: [
                       { id: 1, title: 'My journey with Vue' },
                       { id: 2, title: 'Blogging with Vue' },
                       { id: 3, title: 'Why Vue is so fun' }
                   ],
                   postFontSize:1,
                   searchText:'',
                   ddd:''
               }
           },
           methods: {
               demooo:function(a,b){
                   this.postFontSize+=a;
                   this.ddd=b;
               }
           },
       })
   

7. 上述的为全局注册的组件，使用的是Vue.component(...)来注册,全局注册的组件可以嵌套使用，即组件a在套一个组件a或者b

   • 可以局部注册组件，减少用户加载一些没有用到的组件的javascript，注册使用方法是

   var ComponentA = { ... }  //局部注册
   
   //然后在实例化中声明，这样才可以使用，使用的名称是"component-a",值是ComponentA组件
   let app =new Vue({
   el: '#app',
   components: {
       'component-a': ComponentA,
       'component-b': ComponentB
   }
   })
   

   • 局部注册的组件无法嵌套使用，要嵌套的话，要用的话，要在组件b中声明好想要使用的组件a，类似于局部注册，但是声明的部分是在在自定义组件b中

   var ComponentA = { ... }  //注册组件
   
   //声明，这样B组件就可以使用A组件
   var ComponentB = {
   components: {
       'component-a': ComponentA
   },
   ...
   }
   

8. prop属性进阶，

   • 可以设置prop的类型，如String，Number，Object等等（可以多个类型，多个的话，写为数组的形式），也可以自定义一个判断标准；
   • 可以通过required设置为true，使得这个规定是这个类型的prop(用的是对象的形式)；
   • 可以通过设置default的值，使得这个prop有默认值(用的是对象的形式)；

   props:{
       propA:String,
       propB:[String,Object],
       propC:{
           type: String,
           required: true，
           default:"weeeee"
       },
       propD:{
           //validator的是形式的，不能更改
           validator: function (value) {
           // 这个值必须匹配下列字符串中的一个
           return ['success', 'warning', 'danger'].indexOf(value) !== -1
           }
       }
   }
   

学习的资料来自于Vue官网

目前常在学习Vue的初级阶段，如有出现错误，感谢指正