vue入门

基本信息

vue是mvvm框架 (model view viewmodel) Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。

model 视图/模板
view 模型/数据
viewmodel 视图模型
model与view通过viewModel之间相互检测

起步

你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

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

你也可以下载开发版本或生产版本，然后通过如下方式引入 Vue：

<script src="js/vue.js"></script>//开发版本
<script src="js/vue.min.js"></script>//生产版本  

声明式渲染

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

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

学习vue更多的是学习指令和组件

指令(directives)是带有 v- 前缀的特殊属性。

v-model 在input中

能轻松实现表单输入和应用状态之间的双向绑定

![<div id="app">
  <p>{{ msg }}</p>
  <input v-model="msg">
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        msg: 'Hello Vue!'
    }
    })
</script>

v-if 条件

控制切换一个元素的显示也相当简单：

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

v-for 循环

可以绑定数组的数据来渲染一个项目列表：

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})  

v-on 处理用户输入

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

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

组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例，在 Vue 中注册组件很简单：

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})  

现在你可以用它构建另一个组件模板：

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>  

但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷，我们应该能将数据从父作用域传到子组件。让我们来修改一下组件的定义，使之能够接受一个属性：

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

现在，我们可以使用 v-bind 指令将 todo 传到每一个重复的组件中：

<div id="app">
    <tou name="shitu"></tou>
    <zhong></zhong>
    <ol>
        <todo-item txt="item.shixiang" v-for="(item,index) in todos" key="index"></todo-item>
    </ol>
</div>
<script>
   Vue.component('tou',{
        props:["name"],
        template:'<div>这是头部<a>{{name}}</a></div>'
   })
   Vue.component('zhong',{
        template:'<div>这是zhong部<a>logo</a></div>'
   })
   Vue.component('todo-item',{
        props:["txt"],
        template:'<li>{{txt}}</li>'
   })
   new Vue({
        el:"#app",
        data:{
           todos:[
                {shixiang:"chifan"},
                {shixiang:"shuijiao"},
                {shixiang:"dayouxi"},
           ]
        },
   });
</script>  

这只是一个假设的例子，但是我们已经设法将应用分割成了两个更小的单元，子单元通过 props 接口实现了与父单元很好的解耦。我们现在可以进一步为我们的 todo-item 组件实现更复杂的模板和逻辑的改进，而不会影响到父单元。