Vue.js的一些基本操作

第一步

引入Vue.js

第二步

new 一个Vue就行了

其中的 el 用于绑定一个元素，data给数据赋值，使用{{}}就可以访问到值。

Vue一些操作

v-if: 为真就就显示内容

v-if-else： 多重if，else

v-html： 将文本内容转为html

v-bind： 绑定元素

v-for：循环

<div id="msg">
    <!--这个：key是v-bind:key的简写形式,作用让vue进行监视-->
    <!--index是数组的下标-->
    <div  v-for="value,index in Object" :key="index">
       {{index}}: {{value}}
    </div>
    <div v-for="item,index in items" :key="index">
       {{index}}: {{item.msg}}
    </div>
</div>

<script type="text/javascript">
    var vm =new Vue({
        el: '#msg',
        data:{
            Object: {
                1:'西游记',
                2: '吴承恩',
                3: '元朝'
            },
            items:[
                {msg: 'happyDay'},
                {msg: 'sadDay'}
            ],
        }
    })
</script>

v-model:获取元素内容

<div id="mm">
    <input v-model="msg">
    <p>输入内容为:{{msg}}</p><br>

    <input type="radio" v-model="sex" value="男">男<br>
    <input type="radio" v-model="sex" value="女">女
    <p>所选性别：{{sex}}</p><br>


    <input type="checkbox" id="a" v-model="check" value="Jack">
    <label for="a">Jack</label>
    <input type="checkbox" id="b" v-model="check" value="Tom">
    <label for="b">Tom</label>
    <input type="checkbox" id="c" v-model="check" value="Jerry">
    <label for="c">Jerry</label>
    <p>所选人:{{check}}</p>

    <button @click="submit">点击</button>

</div>
<script type="text/javascript">
    var vm =new Vue({
        el: "#mm",
        data: {
            msg: '',
            sex: '',
            check: []
        },
        methods:{
            submit: function () {
                this.msg//获取值

                //将这些值封装在一个叫people的对象之中
                var people={
                    msg1: this.msg,
                    msg2: this.sex,
                    msg3: this.check.toString()
                }
                console.log(people);
            }
        }
    })
</script>

效果演示：

计算属性:computed,写方法不用写括号

<div id="msg">
    {{Time()}}
    {{Time1}}

    <!--计算属性,在写方法的时候不用括号-->
</div>
<script type="text/javascript">
    var vm =new Vue({
        el: '#msg',
        methods:{
            Time:function () {
                return Date.now();

            }
        },
        computed:{
          Time1:function () {
              return Date.now();
          }
        }
    })
</script>

创造组件：引用.component创造组件

生命周期钩子:在生命周期之中插入方法执行

<div id="msg">
    {{a}}
</div>
<script type="text/javascript">
    var data={a:1};
   var vm=new Vue({
       el: '#msg',
       data: data,
       //生命周期钩子
       beforeCreate:function() {
           console.log("页面创造之前");
       },
       created:function() {
           console.log("页面创造之后");
       },
       beforeMount:function () {
           console.log("在vue还为渲染数据之前,相关渲染首次调用");
       },
       Mounted:function () {
           console.log("在vue已经渲染数据之后");
       },
       beforeUpdate:function () {
           console.log("数据更新时被调用");
       },
       Updated:function () {
           console.log("组件更新时调用");
       }
    });

    vm.a=2;//第一种写法

    //记录一个值的变化,注意变化后的值要写在方法下面
    vm.$watch('a',function(newVal,oldVal) {
        console.log(newVal,oldVal);
    });

    vm.$data.a=3;//第二种写法,用$开始,用于区分属性是谁的


</script>