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：

  {{ message }}

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

app.message = 'hello world';

绑定 DOM 元素属性：

    
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    

var app2 = new Vue({
    el:'#app2',
    data:{
        message:'页面加载于 '+new Date().toLocaleString()
    }
});

app2.message='提示信息'

条件与循环

    
现在你看到我了

var app1 = new Vue({
    el:'#app1',
    data:{
        seen:true
    }
});

app1.seen = false

    

        

            {{todo.text}}
        
    


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

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

处理用户输入

    
 {{message}} 
    逆转消息

var app1 = new Vue({
    el:'#app1',
    data:{
        message:'Hello Vue.js!'
    },
    methods:{
        reverseMsg: function(){
            this.message = this.message.split('').reverse().join('');
        }
    }
});

    
{{message}}
    

var app2 = new Vue({
    el:'#app2',
    data:{
        message:'Hello Vue.js!'
    }
});

组件化应用构建

    

        
            
    

// 定义名为 todo-item 的新组件
Vue.component('todo-item',{
    // todo-item 组件现在接受一个 "prop"，类似于一个自定义属性 这个属性名为 todo。
    props:['todo'],
    template:'
{{todo.text}}
'
});

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