Vue基础

安装vue

npm install vue

命令行工具(CLI)

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

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

使用

引入vue.js

一、声明和渲染

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

    
       {
   { message }}
    

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

这里的数据和DOM已经被绑定在一起，所有的元素都是响应式的。打开浏览器的控制台，并修改app.message。你将看到上例相应地更新.

二、指令

指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性,它们会在渲染的 DOM 上应用特殊的响应式行为

1.条件与循环

v-if

    
  
     
现在你看到我了
    

var app3 = new Vue({  el: '#app-3',  data: {    seen: true  }})

这里面将seen:true改为seen:false可以让现在你看到我了消失。

v-for

v-for 指令可以绑定数组的数据来渲染一个项目列表：

    
  
     
    
      
      {
   { todo.text }}    
  
     
    

var app4 = new Vue({  el: '#app-4',  data: {    todos: [      { text: '学习 JavaScript' },      { text: '学习 Vue' },      { text: '整个牛项目' }    ]  }})

在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表中添加了一个新项。

2、绑定事件监听

v-on

为了让用户和你的应用进行互动，我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：

    
  
     
{
   { message }}
  
     逆转消息
    

var app5 = new Vue({  el: '#app-5',  data: {    message: 'Hello Vue.js!'  },  methods: {    reverseMessage: function () {      this.message = this.message.split('').reverse().join('')    }  }})

3、表单输入绑定

v-model

Vue 提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

    
  
     
{
   { message }}
  
     
    

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

4、元素显示于隐藏

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

Hello!

计算属性

在Vue实例中添加computed:{}

下面是一个简单计算属性例子-购物车:

            
                                    
    
                 杯子:
                 数量:
                 小计:{
   {sumA}}            
     
            鞋子:
                 数量:
                 小计:{
   {sumB}}            
     
            总价:{
   {Sum}}        
    
            

键值修饰符

在Vue实例中添加methods:{},用于写submit()事件。

自定义指令

聚焦input元素

当页面加载时，元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，你访问后还没点击任何内容，input 就获得了焦点。现在让我们完善这个指令：

// 注册一个全局自定义指令 v-focusVue.directive('focus', {  // 当绑定元素插入到 DOM 中。  inserted: function (el) {    // 聚焦元素    el.focus()  }})

也可以注册局部指令，组件中接受一个 directives 的选项：

directives: {  focus: {    // 指令的定义    inserted: function (el) {      el.focus()    }  }}

然后你可以在模板中任何元素上使用新的 v-focus 属性：