Vue.js入门与实践-CSDN博客

本文链接：https://blog.csdn.net/power_to_go_l7/article/details/79683907

vue.js是什么

一个mvvm框架（库），和angulra类似
mvc:mvp mvvm mv* mvx

vue和angular的区别?
vue
-简单易学
-指令以v-xxx开头
-一片html代码配合json，在new出来vue实例
-个人维护项目
-适合移动端项目，小巧
angular
-上手难
-指令以ng-xxx开头
-所有属性和方法都挂到$scope上
-angular由google维护
共同点：不兼容低版本IE

示例

代码

<!DOCTYPE html>

<html>
    <head>
        <title></title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" type="text/css" href="test.css"/>
    </head>
    <body>
        声明式渲染
        <div id="app">
            {{message}}
        </div>
        <div id="app-2">
            <span v-bind:title="message">
                鼠标悬停
            </span>
        </div>
        条件与循环
        <div id="app-3">
            <p v-if="seen">现在你看到我了</p>
        </div>
        <div id="app-4">
            <ol>
                <li v-for="todo in todos">
                    {{todo.text}}
                </li>
            </ol>
        </div>
        处理用户输入
        <div id="app-5">
            <p>{{message}}</p>      
            <button v-on:click="reverseMessage">逆转消息</button>
        </div>
        表单输入与应用状态间的双向绑定
        <div id="app-6">
            <p>{{message}}</p>
            <input v-model="message"/>
        </div>
        组件化应用构建
        <div id="app-7">
            <!--创建一个todo-item组建的实例-->
            <ol>
                <!--现在为每个todo-item 提供todo对象，todo对象是变量（内容可以是动态的）。需为每个组件提供一个‘key’-->
                <!--v-bind 指令将待办项传到循环输出的每个组件中-->
                <todo-item  v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>

            </ol>
        </div>
    </body>
</html>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
//  声明式渲染
    var app = new Vue({
        el:'#app',
        data:{
            message:'Hello World!'
        }
    });
    var app = new Vue({
        el:'#app-2',
        data:{
            message:'页面加载于'+ new Date().toLocaleString()
        }
    });

//条件与循环
    var app3 = new Vue({
        el:"#app-3",
        data:{
            //seen:true
            seen:false
        }
    });
    var app4 = new Vue({
        el:"#app-4",
        data:{
            todos:[
                {text:'123'},
                {text:'456'},
                {text:'789'}
            ]
        }
    });
    app4.todos.push({text:"555"});
//处理用户输入
    var app5 = new Vue({
        el:'#app-5',
        data:{
            message:"Hello VUE.JS!"
        },
        //methods被命名为方法，它也是让我们调用在对象上下文中的函数，它可以操作对象中包含的数据。
        methods:{
            reverseMessage:function(){
                //split:用于把一个字符串分割成字符串数组.reverse:用于颠倒数组中元素的顺序。join:用于把数组中的所有元素放入一个字符串。
                this.message = this.message.split('').reverse().join('')    //字符串倒序输出
            }
        }
    });
//双向绑定
    var app6 = new Vue({
        el:'#app-6',
        data:{
            message:'Hello Vue!'
        }
    });
//组件化应用构建
//定义为todo-item的新组建
//component:组件
    Vue.component('todo-item',{
        //todo-item 组件现在接受一个‘prop’，类似于一个自定义特性.这个prop名为todo
        props:['todo'],
        template:'<li>{{todo.text}}</li>'
    });
    var app7 = new Vue({
        el:'#app-7',
        data:{
            groceryList:[
                {id:0,text:'aa'},
                {id:1,text:'bb'},
                {id:2,text:'cc'}
            ]
        }
    });
</script>