Vue.js学习笔记（1）

安装

兼容性

Vue.js 不支持 IE8 及其以下版本。Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

审查和调试工具

Vue Devtools

npm

在用 Vue.js 构建大型应用时推荐使用 NPM 安装，NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

# 最新稳定版
$ npm install vue

命令行工具

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖
$ cd my-project
$ npm install
$ npm run dev

国内优秀npm镜像推荐及使用

---

介绍

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM：

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

app.message = 'hello world';

绑定 DOM 元素属性：

<div id="app2">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>
var app2 = new Vue({
    el:'#app2',
    data:{
        message:'页面加载于 '+new Date().toLocaleString()
    }
});

app2.message='提示信息'

条件与循环

<div id="app1" v-cloak>
    <p v-if="seen">现在你看到我了</p>
</div>
var app1 = new Vue({
    el:'#app1',
    data:{
        seen:true
    }
});

app1.seen = false

<div id="app2" v-cloak>
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>

var app2 = new Vue({
    el:'#app2',
    data:{
        todos:[
            {text:'html5'},
            {text:'css3'},
            {text:'javascript'}
        ]
    }
});

app2.todos.push({text:'jquery'})
app2.todos.push({text:'bootstrap'})

处理用户输入

<div id="app1" v-cloak>
    <p> {{message}} </p>
    <button v-on:click="reverseMsg" type="button">逆转消息</button>
</div>
var app1 = new Vue({
    el:'#app1',
    data:{
        message:'Hello Vue.js!'
    },
    methods:{
        reverseMsg: function(){
            this.message = this.message.split('').reverse().join('');
        }
    }
});

<div id="app2">
    <p>{{message}}</p>
    <input v-model="message">
</div>
var app2 = new Vue({
    el:'#app2',
    data:{
        message:'Hello Vue.js!'
    }
});

组件化应用构建

<div id="app1" v-cloak>
    <ol>
        <!-- 创建一个 todo-item 组件的实例 -->
        <todo-item v-for="item in list" v-bind:todo="item" v-bind:key="item.id"></todo-item>    
    </ol>
</div>
// 定义名为 todo-item 的新组件
Vue.component('todo-item',{
    // todo-item 组件现在接受一个 "prop"，类似于一个自定义属性 这个属性名为 todo。
    props:['todo'],
    template:'<li>{{todo.text}}</li>'
});

var app1 = new Vue({
    el:'#app1',
    data:{
        list:[
            {id:0,text:'html'},
            {id:1,text:'css'},
            {id:2,text:'javascript'},
        ]
    }
});