Vue.js实战教程-优快云博客

初始化
npm init

安装vue
npm install vue --save

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .active{

    }
</style>
<body>

<!--vue对象的html模板-->
<div id="app">

    <input type="text" v-model="search">
    <hr>

    <div>{{new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()}}</div>

    <div>{{birth()}}</div>

    <div>{{birth1}}</div>
    <hr>

    <input type="text" v-model="store">
    <input type="button" v-bind:class="{active : store > 0}" value="加入购物而车">
    <hr>

    <input type="button" value="点我,生成随机数" @click="random=Math.random()">{{random}}<br>
    <span v-if="random > 0.75">你看到我，> 0.75</span>
    <span v-else-if="random > 0.5">你看到我，> 0.5</span>
    <span v-else>你看到我，> 0</span><br>
    <hr>

    <input type="button" value="点我" @click="show=!show">
    <span v-if="show">true你看到我，if</span>
    <span v-show="show">true你看到我，show</span>
    <hr>

 <ul>
     <li v-if="user.gender=='女'" v-for="user in users">{{user.name}},{{user.gender}}-{{user.age}}</li>
 </ul>

    <hr>

    <input type="checkbox" value="ios" v-model="language">ios<br>
    <input type="checkbox" value="java" v-model="language">java<br>
    <input type="checkbox" value="php" v-model="language">php<br>
    你选择了：{{language.join("、")}}
    </br>

    <!--双向绑定事件,v-model：数据模型-->
    <input type="text" v-model="num">
    <!--v-on:+事件名=js表达式-->
    <input type="button" value="点我呀" v-on:click="num++">
    <!--v-on:+事件名=js表达式--><!--@click="incr"-->
    <input type="button" value="点我呀！" v-on:click="incr">
    <!--花括号：js表达式-->
    <h1>hello,我是{{name}}，有{{num}}为妹子迷恋我</h1>
</div>
</body>

<script src="node_modules/vue/dist/vue.js"></script>

<script>
    /*初始化一个vue实例*/
    const app = new Vue({
        el: "#app",//element，选择器
        data: {//定义数据模型
            name: "6ms",
            num: 100,
            language: [],
            users: [
                {name:'柳岩', gender:'女', age: 21},
                {name:'峰哥', gender:'男', age: 18},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ],
            show: true,
            random:0,
            store:0,
            birthday: 1529032123201,//毫秒值
            ssearch:""
        },

        watch:{//监听
            serach(newVal, oldVal){
                //发送异步请求到后台接口
                console.log(newVal, oldVal);
            }
        },

        methods: {//第一方法
            incr(){
                this.num++;
            },

        //初始化页面数据
        created (){
            //ajax
            this.num = 1000;
        },
        birth()
            {// 计算属性本质是一个方法，但是必须返回结果
                const date = new Date(this.birthday);
                return date.getFullYear() + "-" + date.getMonth() + "-" + date.getDay();
        },
         computed:{
             birth1(){// 计算属性本质是一个方法，但是必须返回结果
               const d = new Date(this.birthday);
               return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
                }
        }
        }
    })

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>

<script type="text/javascript">
    // 定义全局组件，两个参数：1，组件名称。2，组件参数
    Vue.component("counter",{
        template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
        data(){//方法，返回值才为数据模型
            return {
                count:0
            }
        }
    })
    var app = new Vue({
        el:"#app"
    })
</script>
</body>
</html>