九九柒

硬的怕横的，横的怕不要命的，疯子都是不要命的，所以疯子力量大，程序员只有一种，疯狂的程序员。

vue入门，vue指令，vue组件，vue模板

vue

  • 使用虚拟dom操作减少真实dom操作 提高页面的渲染效率

    • 虚拟dom的本质就是内存中的一个对象，该对象和dom结构相互对应

  • 将开发者经历从dom中释放出来，转移到数据的操作

  • 开发者不需要关注页面的渲染，关注的是数据的变化，数据发生变化页面会自动刷新

引用   
<script src="vue.js"> </script>
el : 选择挂载元素
​
new Vue({
        el:"div",
        el:"#root",
        el:".my",
        el:document.querySelector("div"),// dom元素
        // el:"body",// 不允许 挂载到body html元素当中
        data:{
            userName:"laoli"
        }
    })
同一个页面当中可以包含多个VUE实例
 new Vue({
        el:"#one",
        data:{
            num:"one"
        }
    })
    new Vue({
        el:"#two",
        data:{
            num:"two"
        }
    })
如果多个实例均挂载到同一元素，则只识别第一个。
 new Vue({
        el:"#one",
        data:{
            num:"one"
        }
    })
    new Vue({
        el:"#one",
        data:{
            num:"two"
        }
    })
输出，比较，js逻辑{{}} 
{{num}}  //1
​
      el:"#root",
        data:{
            num:1,
        }
    })

指令

指令:是以v-开头，是vue对HTML元素属性的扩展。 v-if:是一个布尔值，用于决定其包裹的内容是否渲染。 v-else-if：是一个布尔值，需要与v-if结合使用，用于决定其包裹的内容是否渲染。 v-else：与v-if或v-else-if结合使用。当上面的条件不满足足时，渲染其包裹的内容。 v-model：用于绑定你的data数据。用于表单元素。 .number:将元素的内容设置为number. .lazy:当失去焦点时，数据才会发生相对应的响应。 .trim:去除左右两侧的空格 。 v-show:值是一个布尔值。用于决定对包裹元素通过display来实现显示与隐藏。 v-bind:将属性与数据进行绑定。简写形式：冒号（:） v-on:绑定事件。简写形式：@ *：可以写方法;方法可以不用带括号。 *：可以写语句。 v-html:会将包裹的内容覆盖掉。可以识别你的元素标签。 v-text:会将包裹的内容覆盖掉。以文档的形式进行输出。 v-once:视图渲染只会响应一次。后续数据变化，包裹的内容不会再次响应。 v-pre:对包裹的内容不会进行响应解析。

v-for 列表渲染
  //对应的是 for in / of 循环
v-for = "数组里的每一项 in/of 要循环的数据" 
<li v-for="item in arr">{{item}}</li>
循环数组 item index
​
循环对象 value key index
obj:{a:1,b:2,c:3}
<li v-for="(value,key,index) in obj">{{key}}：{{value}}-{{index}}</li>
​
循环数字
num：100
<li v-for="item in num">{{item}}</li>
​
循环字符串
str：‘asdfghjjkl’
v-if 条件渲染
v-if="true/false“，条件为真渲染，条件为假不渲染
​
//控制div在界面上的出现和隐藏
<div v-if="state"></div>
​
new Vue({
    el :"#app",
    data:{
        state : true
    }
})
    <input type="text" v-model="sex">
    <div v-if="sex==1">男</div>
    <div v-else-if="sex==2">女</div>
    <div v-else>未知</div>
​
new Vue({
        el:"#root",
        data:{
            isLogin:true,
            sex:3,// 1 男  2 女 其它代表的是 未知
        }
    })
v-show
v-show 是通过display：none控制元素的在与不在
v-if 是直接渲染与不渲染
 <div v-show="isShow" style="width:200px;height:200px;background:red;">
    </div>
​
new Vue({
        el:"#root",
        data:{
            isShow:false //相当于display：none
        }
    })
v-else
v-on:click 事件绑定
v-on:事件名 处理函数写在methods里 事件对象e
在事件中处理函数的默认参数是事件对象
传参，即没有事件对象了 如果需要用$event手动传递 
$event 在vue中表示事件对象
简写：@click
v-bind 属性绑定
v-bind:要绑定的属性=“变量或者表达式”
src class style
   简写  ：属性
   
<img v-bind:src="imgSrc" alt=""> 
    <img :src="imgSrc" alt="">  //简写
  
   new Vue({
        el:"#root",
        data:{
            imgSrc:"http://b.hiphotos.baidu.com/image/h%3D300/sign=ad628627aacc7cd9e52d32d909032104/32fa828ba61ea8d3fcd2e9ce9e0a304e241f5803.jpg"
        }
    })

 

v-model 双向数据绑定

v-model 实现双向数据绑定

通过v-model 将data里的数据和表单元素的value，data的数据是啥 表单的value就是啥

表单元素的value值发生改变 会影响data里的数据

data里的数据发生改变也会影响表单的value

使用方式

1 和表单元素一起使用

2.和组件一起使用

v-model = 事件绑定 input + value的属性绑定

input里输入内容
p标签显示什么内容
数据的绑定方式有2中
1.数据绑定到视图 {{}}
2.视图修改数据
​
<div id="app">
        <input type="text" name="" id="" v-model="msg">
        <hr>
        <p>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el :"#app",
            data: {
               msg:"hehe"
            }
        })    
    </script>
​

 

​
.number - 输入字符串转为有效的数字 
           
 <input type="text" v-model.lazy="str">
    <div>{{str}}</div> 
.lazy - 取代 input 监听 change 事件
​
.trim - 输入首尾空格过滤
​
v-html v-text
v-html : 可以渲染html的标签
v-text ： 渲染的只是字符串
​
<div id='app'>
    <div v-text='string'>
​
    </div>
    <hr>
    <div v-html='string'>
​
    </div>
  </div>
​
new Vue({
  el:"#app",
  data:{
      string:"<h1>呵呵哒</h1>"
  }
​
})
全局自定义指令
指令在谁身上使用 该元素就是被绑定的元素
调用 ： v-“名字”
全局自定义指令：每个实例都能用 定义在new vue 前面
Vue.directive('hehe',{
    //配置项
    //插入方法
  inserted(el){
    // el 便是被绑定的dom元素
    el.focus()
    console.log('dom插入')
  }
})
局部自定义指令

  • 在哪定义的在哪用

let  vm1=new Vue({
  el:"#app1",
  data:{
     name:'实例1'
  },
  
  directives:{
    'hehe':{
      inserted(el){
         el.innerHTML='局部'
      }
    }
  }
​
})

 

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

v-pre

跳过这个元素和它的子元素的编译过程。

#####

事件

* 1、事件绑定一个函数。函数可以带括号，也可以不带。

* 区别：带括号可以根据自身的需要传递数据。不带括号，默认传递的是事件对象

* 2、事件可以直接写JS语句，多条语句用分号分隔。

* 语句与JS不是完全互通的。

style
    <p style="background:red;color:yellow;">我现在挺好的，火车票也买好了，你买到了吗？</p>
    <p :style="'background:red;color:yellow;'">我现在挺好的，火车票也买好了，你买到了吗？</p>
    <p :style="st">我现在挺好的，火车票也买好了，你买到了吗？</p>
    <p :style="{background:'red',color:'yellow'}">我现在挺好的，火车票也买好了，你买到了吗？</p>
    <p :style="stObj">我现在挺好的，火车票也买好了，你买到了吗？</p>
    <p :style="[bg,co]">我现在挺好的，火车票也买好了，你买到了吗？</p>

new Vue({
        el:"#root",
        data:{
            bg:{
               background:"green"
            },
            co:{
                color:"orange"
            },
            st:"background:red;color:yellow;",
            stObj:{
                background:"red",
                color:"yellow"
            }
        },
        methods:{

        }
    })
class
    <style>
        .bg{
            background:red;
        }
        .co{
            color:yellow;
        }
    </style>  

	<p class="bg co">我确定你就是那只匹着羊皮的狼。</p>
    <p :class="bgco">我确定你就是那只匹着羊皮的狼。</p>
    <p :class="myBg">我确定你就是那只匹着羊皮的狼。</p>
    <p :class="myCo">我确定你就是那只匹着羊皮的狼。</p>
    <p :class="[myBg,myCo]">我确定你就是那只匹着羊皮的狼。</p>
    <!--bg指的是样式的名字。属性值是一个布尔值，如果为true则样式生效，否则不生效-->
    <p :class="{bg:true,co:true}">我确定你就是那只匹着羊皮的狼。</p>
    <!--属性名就是你最终的样式名。样式是否采用要看属性值是否为true-->
    <p :class="{'bg co':true}">我确定你就是那只匹着羊皮的狼。</p>
    <p class="bg">我确定你就是那只匹着羊皮的狼。</p>

  new Vue({
        el:"#root",
        data:{
            myBg:"bg",
            myCo:"co",
            bgco:"bg co"
        },
        methods:{

        }
    })

组件式开发

将页面分割成小零件（组件），将零件进行拼装，一样的可以复用

组件

组件：是对元素标签的一个扩展。component

使用组件的原因：提高代码的复用性

  1. 必须使用连字符命名，如：my-compoent

  2. template中的内容必须要用dom元素包裹

  3. 组件的定义中，还可以有data，methods，computed

  4. data必须是一个方法

全局组件
//1、创建组件；
let component = Vue.extend({
    template:'<h1>组件1</h1>'
})
//2、注册组件；
Vue.component("名字",component)
//3、使用组件
    组件名当做标签名来使用
局部组件
//1、创建组件；
let component = Vue.extend({
    template:'<h1>组件1</h1>'
})
//2、注册组件；
 //在配置项中
    components:{
        "名字":component;
    }
//3、使用组件
    组件名当做标签名来使用
​

  • 区别：注册的位置

组件的简写
//将组件的创建和注册合并到一起
Vue.component('hehe',{
  template:'<h1>🙃</h1>'
})
组件的配置项
模板
<template id='tp1'>
    <div class='tp1'>
        <div></div>
    </div>
  </template>
// 组件模板要求只能有一个跟元素
Vue.component('hehe',{
  template:'#tp1'
})
数据
//组件里的data是一个函数
Vue.component('hehe',{
  template:'#tp1',
  data(){
    return{
      name:'lalala'
    }
  }
})
其他配置项
//方法
methods:{
    
}
组件继承实例，实例有的，组件都可以有，部分发生改变

  • 组件里绑定的元素是template

  • 数据data函数，返回一个对象

组件通信：组件之间数据的相互传递

全局组件嵌套
组件标签内部内容不会被渲染
全局组件没有固定的嵌套关系，随着书写方式的不同，嵌套关系也不同
<template id="tp1">
        <div class="tp1">
            one
            
        </div>
    </template>
    <template id="tp2">
        <div class="tp2">
            two
            <father></father>
        </div>
    </template>
   
        Vue.component("father", {
            template:"#tp1"
        })
        Vue.component("son", {
            template:"#tp2"
        })
​
局部组件的嵌套
//局部组件在注册的同时已经确定了嵌套关系
let  vm1=new Vue({
  el:"#app1",
  data:{
     name:'实例1'
  },
  components:{
    tp1:{
      template:"#tp1",
      components:{
        tp2:{template:'#tp2'}
      }
      },
  }
})

组件通信

父子通信

  • 可以通过props 自定义属性，将父组件的数据传递给子组件 子组件可以使用父组件的数据

  • 父组件的数据发生改变之后，子组件的数据也发生改变

  • props 传递的数据，子组件不能修改只能使用

props
  <div id='app1'>
     <tp1></tp1>
  </div>
​
​
  <!-- 组件的模板 -->
  <template id='tp1'>
    <div class='tp1'>
       这里是爸爸
       <button @click='attack'>踹</button>
       <!-- <div v-if='color'>sdfsfs</div> -->
       <tp2 :hair='color'></tp2>
  
    </div>
  </template>
    <!-- 组件的模板 -->
  <template id='tp2'>
    <div class='tp2'>
        这里是儿子{{hair}}
        <div :class='hair?"normal":"green"'>
​
        </div>
    </div>
  </template>
<script>
Vue.component('tp1',{
  template:'#tp1',
  data(){
    return{
      color:false
    }
  },
  methods: {
    attack(){
      this.color=!this.color
    }
  },
})
Vue.component('tp2',{
  template:'#tp2',
  props:['hair'],
  created() {
    // 组件创建的时候会自动执行
    console.log('tp2',this)
  },
})
let  vm1=new Vue({
  el:"#app1",
  data:{
     name:'实例1'
  },
​
})
子父通信

子组件控制父组件的数据，子组件的$emit，可以触发绑定在父组件身上的自定义事件

$emit
//this.$emit('自定义事件名',传递的参数)
<div id='app1'>
     <tp1></tp1>
  </div>
​
​
  <!-- 组件的模板 -->
  <template id='tp1'>
    <div class='tp1'>
       这里是爸爸
       <hr> 
       爸爸钱包的余额 :{{money}}
       <!-- <div @click='fabuy'></div> -->
       <tp2 @hehe='fabuy'></tp2>
       <!-- tp2身上绑定了一个自定义事件 事件名 hehe 处理函数是父组件的fabuy方法 -->
    </div>
  </template>
    <!-- 组件的模板 -->
  <template id='tp2'>
    <div class='tp2'>
        这里是儿子
        <button @click='buy'>buybuybuy</button>
    </div>
  </template>
<script>
Vue.component('tp1',{
  template:'#tp1',
  data(){
    return{
      money:20
    }
  },
  methods: {
    fabuy(num){
      this.money-=num
      console.log('余额减减减')
    }
  },
})
Vue.component('tp2',{
  template:'#tp2',
  methods: {
    buy(){
      console.log('买买买')
      // 触发绑定在组件身上的自定义事件
      this.$emit('hehe',5)
    }
  },
​
})
let  vm1=new Vue({
  el:"#app1",
})
兄弟通信

  • 亲兄弟，可以状态提升，将要改变的数据和改变数据的方法放在公用的父级上

  • 通过自定义属性和自定义事件结合实现通信

  <div id='app1'>
     <tp1 :toggle='show'></tp1>  
     <tp2 @fafun='toggle'></tp2>
  </div>
​
​
  <!-- 组件的模板 -->
  <template id='tp1'>
    <div class='tp1'>
       <div class='green' v-if='toggle'>
​
       </div>
    </div>
  </template>
    <!-- 组件的模板 -->
  <template id='tp2'>
    <div class='tp2'>
       <button @click='sonToggle'>toogle</button>
    </div>
  </template>
<script>
Vue.component('tp1',{
  template:'#tp1',
  props:['toggle']
​
})
Vue.component('tp2',{
  template:'#tp2',
  methods: {
    sonToggle(){
      this.$emit('fafun')
    }
  },
})
let  vm1=new Vue({
  el:"#app1",
  data:{
    show:false
  },
  methods: {
    toggle(){
      this.show=!this.show
    }
  },
})

 

模板

  // 模板：有且只能有一个根元素。用模板，将挂载的元素替换掉。
        template:"<div>12{{userName}}</div>"
        // template:"<div>12</div><div>34</div>"
​
   new Vue({
        el:"#root",
        data:{
            userName:"laolitou"
        },
        // 建议如果使用直接赋值，使用反引号
        template:`
            <div>
                <a href="http://www.baidu.com">百度</a>
                <a href="http://www.baidu.com">百度</a>
                {{userName}}
            </div>
        `
    })
通过script标签
<div id="root"></div>
</body>
<script type="x/template" id="tp">
    <div>
        <h3>我买到火车票啦。哈哈{{str}}</h3>
    </div>
</script>
<script>
    new Vue({
        el:"#root",
        data:{
            str:"庆余年。"
        },
        template:`#tp`
    })
</script>
通过template标签
<div id="root"></div>
</body>
<template id="tp">
    <div>
        <h3>我买到火车票啦。哈哈{{str}}</h3>
    </div>
</template>
<script>
    new Vue({
        el:"#root",
        data:{
            str:"庆余年。"
        },
        template:`#tp`
    })
</script>
components
// 各个VUE实例的数据是不共享的。
    new Vue({
        el:"#root",
        data:{
            userName:"xixi"
        },
        components:{
            // 定义了一个名字为banzhang的组件。组件是一个对象。
            banzhang:{
                template:`
                    <div>我的老班长，你现在过的怎么样。</div>
                `
            },
            // 中间不要出现大写。如果定义时采用大写的话，在使用时，需要用-分隔。首字母允许大写。
            // userName
            qianFeng:{
                template:`
                    <div>众里寻你千百度，莫然回首你却在千锋蓝山处！</div>
                `
            }
​
        }
    })
​
    // 在组件当中定义data要求：
    // 1、data是一个函数。2、该函数必须要有返回值   3、返回值的类别必须要是一个对象。
                data(){
                    return {
                       userName:"laoli"
                    }
                }
组件的传值
 components:{
            My:{
                props:["age"],
                template:`
                    <div>我是一个MY组件{{age}}</div>
                `
            }
      }
使用props传递数据 父向儿子传递数据

  1. 在子组件上声明属性msg，然后在子组件处用props来接收

<div id="app">
    我是爸爸
    <child-component :msg="fatherMsg"></child-component>
</div>
<script>
 new Vue({
        el: '#app',
        components: {
            'child-component': {
                // 从父组件和本身data传入的数据在methods、template中都可以使用
                props: ['msg'],
                data: function(){
                    return {
                        count:1
                    }
                },
                template: '<div id="child">{{msg}}</div>',
            }
        }
    })
</script>
​

  1. 动态向子组件传入信息，则用v-model



    

  1. 

    在props中定义的属性都可以在组件内使用，可以在template、computed、methods中使用
    

    2. 



$emit的使用场景


    

  • 

    子组件调用父组件的方法并传递数据 不区分大小写“-”隔开
    

    • 

  • 

    使用 $emit(eventName) 触发事件
    

    • 



$refs的使用场景


    

  • 

    父组件调用子组件的方法，可以传递数据
    

    • 



$on的使用场景


    

  • 

    兄弟组件之间相互传递数据
    

    • 

  • 

    使用 $on(eventName) 监听事件
    

    • 



定义组件


    

  • 

    组件的名字如果使用驼峰命名，需要将词组之间采用-来分隔。
    

    • 

  • 

    通过该种方法定义的组件，只可以在自已实例当中使用。
    

    • 



组件的嵌套


钩子函数


在你实例从创建到销毁的过程当中，所暴露出来的函数，称为钩子函数。（在从创建到销毁的阶段当中自动运行的函数）


mounted()




对于前端来说，钩子函数就是指再所有函数执行前，我先执行了的函数，即 钩住 我感兴趣的函数，只要它执行，我就先执行。


对于前端来说：在这发起后端请求，拿回数据，配合路由钩子做一些事情




动态组件




is：切换不同的组件


 


区别：


is


可以直接传递一个组件


:is


是查找父组件中的一个赋值，然后找到相应的组件




组件的传值


向下传值


    

  • 

    组件中不要讲接收的属性和名字与定义的data属性名字重复
    

    • 

  • 

    向下传递的属性名不运行出现大写，词组之间用-进行分隔，接收时可以采用驼峰命名
    

    • 



向上传值


    

  • 

    父子之间的数据是单向的（单向数据流），子组件不可以直接修改父组件传递的数据
    

    • 



ref 属性获取dom节点


    <div ref="myDiv">你好吗</div>

                this.$refs.myDiv.style.color = "red";

如果ref的值相同，通过this.refs得到的是最后一次出现的元素。


ref组件


全局组件


 const One = {
        template:`<div>One</div>`
    }
//第一个参数是组件的名字。第二个参数是组件的配置项


定义多个全局组件


 // 第一个参数是组件的名字。第二个参数是组件的配置项
    Vue.component('One',{
        template:`<div>lala</div>`
    })
    Vue.component('Two',{
        template:`<div>two</div>`
    })

    new Vue({
        el:"#root",
    })
    new Vue({
        el:"#root2"
    })


公共组件


<script type="module">
    import components from "./components/index.js";
    for(let key in components){
        Vue.component(key,components[key]);
    }
    new Vue({
        el:"#root",
        // components
    })
    new Vue({
        el:"#root2",
        // components
    })


vue.prototype


    

  • 

    实际上是为Vue对象添加了一个原型属性，而不是一个全局变量。但是如果这个原型属性的值是引用类型的，我们就可以借此实现全局变量
    

    • 



 Vue.prototype.userName = "laotie";
 Vue.prototype.$bus = new Vue();


事件修饰符


.stop


@click.stop=""  //组织事件冒泡
e.cancelBubble = true;


.prevent


//阻止浏览器默认行为 右键菜单
@contextmenu.prevent="fn"

//阻止提交按钮
  <input type="submit" @click.prevent="send" value="提交">


键盘事件


@keyup.left = "fn";
@keyup.65 = "fn";
@keyup.a = "fn";

   <input type="text" @keyup="fn">  
    new Vue({
        el:"#root",
        data:{

        },
        methods:{
            fn(e){
                console.log(e.keyCode);
            }
        },
        computed:{

        },
        filters:{

        }
    })


 


 


 








            

            
posted @ 
2019-12-31 15:39 
九九柒 
阅读(408) 
评论(0) 
编辑 
收藏 
举报