Vue学习（第三天 Vue基础）

vue中对于页面+数据更为方便的输出，这些操作叫做指令。以v-xxx表示。如<div v-xxx>。

例如data中有这样的定义：

data(){
    return {
      msg:'欢迎',
      msg2:'<h3>欢迎</h3>'
    }
  }

　　我们可以将msg在p标签中进行显示，可以在template中这样写：

<p v-text= "msg"></p>　

　　这样写并不常用因为直接双大括号插入值就可以了，但是也可以将msg2放下div标签下成为一个<h3>标签，里面的内容是欢迎。这样写：

<div v-html = "msg2"></div>

　　同理，v-if的功能是当后面的表达式为true的时候才会显示标签内容。如果为false则不显示，下面是显示内容的例子：

<div v-if='true'>澳门赌场上线了</div>

　　可以使用一个变量来改变是否显示，其中变量show在data中定义为show:true。

<div v-if='!show'>澳门赌场上线了</div>

　　那么v-if里面也可以放各种表达式，或者随机数大于小于几的那种形式各种各样就比较灵活了。具有形似功能的是v-show，v-show是控制dom元素的显示和隐藏，也就是display:none\block。v-if是真正的条件渲染，false是直接销毁掉true是直接创建的。v-show总会在界面中渲染只是表现或者不表现，如果是频繁的显示/隐藏一定要选择v-show否则将会造成性能消耗。总结：v-show是初始化开销，v-if是切换开销。

　　v-bind用来绑定标签上的属性（系统的属性和自定义的属性），

<style type="text/css">
  .box{
    width: 300px;
    height:300px;
    background-color:red;
  }
  .active{
    background-color: green;
  }
</style>

　　声明一个盒子，默认为红色，active默认是绿色的，在创建box在div中的时候可以用v-bind进行绑定：

<div class='box' v-bind:class = "{active:true}"></div>

　　绑定的内容是class为active对象，active为true的时候显示了绿色，这里改成false则显示红色。这里要知道v-bind可以简写为冒号。

　　v-on绑定点击事件 

　　v-on：原生事件名='函数名' 简便写法：@　　举个例子，我们把div用v-on绑定点击事件函数clickHandler，然后active中的isGreen默认是false也就是说默认box是红色的。

<div class='box' v-on:click='clickHandler' v-bind:class = "{active:isGreen}"></div>

　　然后我们写clickHandler函数：

methods:{
    clickHandler(e){
      this.isGreen = true;
    }
  }

　　这样当我们点击box的时候，点击事件触发，box马上变成了绿色。把上述代码中的true变成!isGreen则可以反复点击来回切换颜色。

　　v-for用来遍历对象。在data中添加一个对象person：

person:{
　　name:'zhang3',
　　age :'33'
}

　　然后在用v-for来迭代输出：

<li v-for='(value,key) in person'>
   {{key}}=={{value}}
</li>

　　效果

 

 

 　v-model双向数据绑定。实质是v-bind：value + v-on：input的功能。代码如下：

　　 <div id='app'>
        <input type ="text" v-model="msg">
        <h3>{{msg}}</h3>
    </div>
    <script type = "text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type = "text/javascript">
        new Vue({
            el:"#app",
            data(){
                return{
                    msg:'大象'
                }
            }
        });
    </script>

　　

 

 　　可以看到数据改变的时候显示的msg也同时改变了。

　　组件：分为局部组件和全局组件。局部组件只在当前组件的内部使用，全局组件全局共享，任何组件都可以使用。组件之间存在嵌套，因此形成了父子组件的东西。声明、挂载、使用三个步骤。

1.声明一个入口组件：

        var AppName = {

            data(){

                return {}

            },

            methods:{

                clickHandler(){

                    console.log(this);

                }

            },

            template:"<div>入口组件<button@click='clickHandler'>按钮</button></div>"

        }

　　在这里定义了一个按钮，点击后会走clickHandler函数。组建效果是这样的：

 

 

 2.挂载和使用这个组件：

        new Vue({
            el:"#app",
            data(){
                return{
                   
                }
            },
            components:{
                AppName //这是挂载
            },
            template:'<AppName/>' //这里使用 等于<AppName></AppName>
            
        });

　　这样这个组件成为一个局部组件了。

　　内容部分来自bilibili小马哥老师的教学视频。传送门：https://www.bilibili.com/video/BV1eE41187ny?p=2