vue.js

1. 定义js对象的方式

 <input type="button" value="点击" onclick="hello()">

 /* JavaScript */
 function hello(){
     person.sayHello();
 }
/*  定义js对象方式一：*/
 var person = new Object();
 person.pid = "001";
 person.pname = "jim";

 person.sayHello = function () {
     alert("Hello World!");
 }

 /*  定义js对象方式二： */
 var person ={
     "pid" : "001",
     "pname" : "jim",
     "sayHello" : function () {
         alert("say hello!");
     }
 };

2. 在html文档中引入vue.js

改变html内部的文本信息

<script language="JavaScript" src="../script/vue.js"></script>
<script language="JavaScript">
    window.onload = function () { <!--当页面加载完成后调用匿名函数-->
         var vue = new Vue({ <!--绑定-->
            "el" : "#div0", <!--el:表示element，节点，#div0： #表示id,.表示class-->
            data : {
                msg :"hello"
                uname :"tom",
                age :"18"
            }
          });
     }
</script>

<div id="div0">
    <span> {{msg}} </span>
    <input type="text" v-bind:value="uname"/> <!--v-bind绑定value属性，可以省略-->
    <input type="text" :value="age"/>
</div>

v-model 双向绑定

<span>{{msg}}</span><br/>
<!--
    v-model指的是双向绑定，
    也就是说之前的v-bind是通过msg这个变量的值来控制input输入框
    现在 v-model 不仅msg来控制input输入框，反过来，input输入框的内容也会改变msg的值
 -->
<!--<input type="text" v-model:value="msg"/>-->

<!-- v-model:value 中 :value可以省略，直接写成v-model -->
<!-- trim可以去除首尾空格 -->
<input type="text" v-model.trim="msg"/>

v-if 和v-else 用于判断 

v-show 是通过display来显示或者隐藏

v-for 列表循环

<ul>
		<!-- 使用v-for语法遍历数组 -->
		<!-- v-for的值是语法格式是：引用数组元素的变量名 in Vue对象中的数组属性名 -->
		<!-- 在文本标签体中使用{{引用数组元素的变量名}}渲染每一个数组元素 -->
		<li v-for="fruit in fruitList">{{fruit}}</li>
	</ul>

反转

<script language="JavaScript">
        window.onload=function(){
            var vue = new Vue({
                "el":"#div0",
                data:{
                    msg:"hello world!"
                },
                methods:{
                    myReverse:function(){
                        this.msg = this.msg.split("").reverse().join(""); <!--按照每个字母分割，之后再反转-->
                    }
                }
            });
        }
    </script>

3. Vue对象的生命周期

                /*vue对象创建之前*/
                beforeCreate:function(){
                    console.log("beforeCreate:vue对象创建之前---------------");
                },
                /*vue对象创建之后*/
                created:function(){
                    console.log("created:vue对象创建之后---------------");
                },
                /*数据装载之前*/
                beforeMount:function(){
                    console.log("beforeMount:数据装载之前---------------");
                },
                /*数据装载之后*/
                mounted:function(){
                    console.log("mounted:数据装载之后---------------");
                },
                beforeUpdate:function(){
                    console.log("beforeUpdate:数据更新之前---------------");
                },
                updated:function(){
                    console.log("Updated:数据更新之后---------------");
                }

   1) {{}} - 相当于innerText
   2) v-bind:attr 绑定属性值。例如，v-bind:value - 绑定value值   简写：    :value
   3) v-model 双向绑定
       v-model:value   , 简写  v-model
   4) v-if , v-else , v-show
       v-if和v-else之间不能有其他的节点
       v-show是通过样式表display来控制节点是否显示
   5) v-for 迭代
       v-for={fruit in fruitList}
   6) v-on 绑定事件
   7) 其他：
       - trim:去除首尾空格 , split() , join()
       - watch表示侦听属性
       - 生命周期