初识Vue

佚名 6年前 (2019-04-22) 随笔 1522人围观抢沙发百度已收录

1.什么是Vue

　　Vue是MVVM模式；适合做单页面；

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

　　核心思想：数据驱动视图；

2.Vue实例化对象

<div id="c1">
    <!--插值语法{{}}；react用{},angular用{{}}-->
    <h3>{{msg}}</h3>
</div>

<script src="./vue.js"></script>
<script>
    // 实例化一个Vue对象,名字是app;
    var app = new Vue({
        el: '#c1',
        data:{
            msg:'学习Vue'
        }
    });
    console.log(app);
    console.log(app.$data);
    console.log(app.$data.msg)


</script>

3.指令系统

//常用的指令
v-text 
v-html 
v-if　　   //条件渲染
v-show
v-for
v-bind　　//绑定属性
v-on     //注意:所有的原生js的事件使用v-on都可以绑定

v-if

<div id="c1">
    <h1 v-if = 'show'>哈哈</h1>  
</div>

<script src="./vue.js"></script>
<script>
    var app = new Vue({
        el: '#c1',
        data:{
            msg:'学习Vue',
            show:true,       //页面显示哈哈；如果show:false,页面不显示哈哈；
        }
    });
</script>

v-on

<div id="c1">
    <h1 v-if = 'show'>哈哈</h1>
    <!--事件的调用-->
    <button v-on:click = "clickHandler">切换</button>
    <!--<button @click="clickHandler">切换</button>  -->   <!--v-on  的简便写法-->
    <button v-on:click = "count+=1">加{{count}}</button>
</div>

<script src="./vue.js"></script>
<script>
    var app = new Vue({
        el: '#c1',
        // data里面放数据属性；可以理解为小的数据库
        data:{
            show:true,
            count:0,
        },
        methods: {
            // 事件的声明
            clickHandler() {
                this.show = !this.show;
            },
        }
    });
</script>

v-bind

<div id="c1">
    <h2 v-bind:title="title">我是h2</h2>
    <!--<h2 :title="title">我是h2</h2>-->        <!--v-bind:  的简便写法  ：-->
    <div class="box" v-bind:class="{box2:isGreen}"></div>
    <!--如果isGreen是true，会将box2添加到class中。如果是false，则不会。-->
    <button v-on:click="changeColor">切换颜色</button>
</div>

<script src="./vue.js"></script>
<script>
    var app = new Vue({
        el: '#c1',
        data:{
            title:'我是隐藏的',
            isGreen:true,
        },
        methods:{
            // 事件的声明
            changeColor(){
                this.isGreen = !this.isGreen;
            },
        }
    });
</script>

为什么在HTML中监听事件？

4.计算属性

5.数据的双向绑定和单向绑定

　　双向数据绑定=单向数据绑定+UI事件监听

看个双向绑定的例子：v-model只适用在表单控件中

<div id="content">
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
</div>
<script src="./vue.js"></script>
<script>
    var content = new Vue({
        el: "#content",
        data: {
            msg: "123"
        }
    })
</script>