初识vue.js

什么是vue.js

vue.js是一套构建用户界面的渐进式框架。个人观点，目前大型项目前后端分离已成为趋势，vue采用自底向上增量开发设计，核心库只关注视图层，易于上手，还便于与第三方库或既有项目整合。

学习之前

学习框架之前，需掌握html，css，javascript，计算机网络等知识。

起步

新手不推荐直接使用vue-cli。推荐直接新建一个html文件，然后用<script>标签引入Vue。

<script src="https://unpkg.com/vue"></script>

声明式渲染

vue.js的核心是一个允许采用简洁的模板语法来声明事得将数据渲染进dom的系统：

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>My first Vue app</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<h3>samlpe1 声明式渲染</h3>
<div id="app">
    {{ message }}
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
</script>
</body>
</html>

2017-10-05 23-18-54屏幕截图.png

浏览器打开输出Hello Vue！，这便是我们生成的第一个Vue应用！现在数据与DOM已经绑定在一起了，所有元素都是响应式的，按F12打开浏览器的控制台，修改app._data.message，会发现页面会做相应的改变。

2017-10-05 23-18-54屏幕截图.png

vue.js指令

指令带有前缀 v-，以表示他们是Vue提供的特殊属性，他们会在渲染的DOM上应用特殊的响应式行为。
v-bind:属性绑定指令。
v-if="bool":条件指令。
v-for="elem in Array":循环指令。
v-on:该指令可用来绑定一个时间监听器。
v-model:表单与应用之间双向绑定指令。

组件化应用构建

类似angular的Component，vue也存在类似的组件系统，他允许我们使用小型、独立的可服用的组件构建大型应用。
在Vue中注册组件，注册之后，可直接使用<todo-item></todo-item>标签使用该组件。

1
2
3

Vue.component('todo-item'{
                template:'<div>html 模板</div>'
              })

demo

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>My first Vue app</title>
    <script src="https://unpkg.com/vue"></script>

</head>
<body>
<h3>samlpe1 声明式渲染</h3>
<div id="app">
    {{ message }}
</div><br><br><br><br><br><br>
<h3>samlpe2 绑定DOM元素属性</h3>
<div id="app-2">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>
<h3>samlpe3 条件</h3>
<div id="app-3">
    <p v-if="seen">now you can look me</p>
</div>
<h3>samlpe4 循环</h3>
<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>
<h3>samlpe5 事件监听</h3>
<div id="app-5">
    <p>{{message5}}</p>
    <button v-on:click="reverseMessage">逆转信息</button>
</div>
<h3>samlpe6 表单与应用状态双向绑定</h3>
<div id="app-6">
    <p>{{message6}}</p>
    <input v-model="message6">
</div>
<h3>samlpe7 组件化应用构建</h3>
<div id="app-7">
    <ol>
        <!--
        现在我们为每个todo-item提供todo对象
        todo对象是变量，即内容可以是动态的。
        我们也需要为每个组件提供一个key。
        -->
        <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id"
        >
        </todo-item>
    </ol>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
    let app2 = new Vue({
        el:'#app-2',
        data:{
            message:'页面加载于 ' + new Date().toLocaleDateString()
        }
    });
    let app3 = new Vue({
       el:'#app-3',
       data:{
           seen:true
       }
    });
    let app4 = new Vue({
        el:'#app-4',
        data:{
            todos:[
                {text:'学习javascripts'},
                {text:'学习vue'},
                {text:'做个项目'}
            ]
        }
    });
    let app5 = new Vue({
        el:'#app-5',
        data:{
            message5:'hello vue.js'
        },
        methods:{
            reverseMessage: function () {
                this.message5 = this.message5.split('').reverse().join('');
            }
        }
    });
    let app6 = new Vue({
        el:'#app-6',
        data:{
            message6:'Hello world'
        }
    });
    Vue.component('todo-item' , {
        props:['todo'],
        template:'<li>{{todo.text}}'
    })
    let app7 = new Vue({
        el:'#app-7',
        data:{
            groceryList:[
                {id:0 , text:'蔬菜'},
                {id:1 , text:'奶酪'},
                {id:2 , text:'水果'},
            ]
        }
    })
</script>
</body>
</html>

参考资料

文档！文档！文档！左转vue.js