什么是vuejs

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。

起步

尝试 Vue.js 最简单的方法是使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

声明式渲染

vuejs的核心是使用简洁的模板语法声明式的将数据渲染进dom中。

<div id="app">
  {{ message }}
</div>

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

{{message}}渲染得到结果 hello vue
我们可以通过 app.message读取message的值
也可以通过 app.message='hello world'修改他的值

除了以上的文本插值方式，我们还可以绑定元素的特性。

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

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

以上代码在app2中的span中，绑定了 title 功能，鼠标上移，显示相关信息。

这里我们遇到了一点新东西。你看到的 v-bind: 特性被称为指令。指令都是带有 v- 前缀的，来表示这是 vue提供的特性。简写为 : ,他会在渲染 dom 的时候应用特殊的响应式行为。
例如：

v-bind:title="鼠标悬停显示"  //常规
:title="鼠标悬停显示"  //简写

条件与循环

条件：v-if

vue中控制一个元素的显示和隐藏也非常简单。

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

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

在 v-if 中绑定了一个 seen 的值，当seen===true，就显示节点，false则隐藏。
这个例子展示我们不仅可以渲染数据到dom上，还可以操作他的结构。
如果 js中设置 app3.seen=false,节点就会 被去掉。
通常 v-if 都会被用在 tab 切换上面。

循环：v-for

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

<div id="app-4">
  <ol>
    <li v-for="(todo,index) in todos" :key="idx">
      {{ todo.text }}
    </li>
  </ol>
</div>

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

其中 v-for属性中的 todo 代表 todos 这个数组中的每一个项，即 {text："学习javascript"}等这三个的循环。
如果需要在列表中新增一个text和内容，如下：app4.todos.push({ text: '新项目' })
使用数组的js操作删增即可。

注意：一般使用 v-for 的同时，都需要添加 key属性，否则会出现警告，key如果在数组中没有id，可以使用index

处理用户输入

当用户与应用交互的时候，使用 v-on:事件可以添加一个事件监听器，简写为@事件
例如：

v-on:click="handleclick()"  //常规
@click="handleclick()"  //简写

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

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

这里是在 button 点击的时候 执行 reserseMessage方法。
方法则写在，vue中的methods中。

在 reserseMessage方法中我们更新了引用，但是没有操作dom，因为所有的dom都会由 vue 自动来处理。

Vue还提供了 v-model 指令，可以轻松的实现表单和应用的双向绑定。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

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

当我们在 input 中输入删除的时候， p标签中的 message也会实时的输入和删除。

组件化的应用和构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})
现在你可以用它构建另一个组件模板：

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

自定义组件都是在vue中的 components中描述的，一般如下
①在新建的vue文件中写一个组件
②在需要组件的页面中引入该组件，import ...
③在components中注册自定义组件使用。这里的components中是使用了es6的语法。

components:{
  vueCropper:vueCropper  //属性为自定义的组件名字，值是import引用组件的变量。
//组件的使用：<vueCropper></vueCropper>
}

components:{
  yes:vueCropper  
  //如果这样写，那么组件使用的时候就是 <yes></yes>
}

但是一般都是选择 es6的简写方式，等同于 案例1

image.png

如果我们在一个div中引入 2个 <todo-item></todo-item>,那他就会渲染2次相同的文本内容，这并不是我们想要的，因为常常都是相同的模块里面内容是不同的。

<ol>
  <todo-item></todo-item>
  <todo-item></todo-item>
</ol>

解决方法，我们可以在组件中，接收一个 props

父组件//
<template>
  <tips :msg="tipsmsg" ></tips>
  <tips :msg="tipsmsg2" ></tips>
</template>

<script>
    import tips from '../components/tips/tips';
    export default{
        data(){
              return{
                    tipsmsg:' '
              }
        },
        components:{
            tips
        }
  }
</script>


子组件//
<template>
    <div :class="['tips',{'tipsoff':tipsoff}]">
        <p class="p1">{{msg}}</p>
    </div>
</template>

<script>
    export default{
        props:['msg','msgshow'],
        data(){
            return{
                tipsoff:true
            }
        },
        created(){
            setTimeout(()=> {
                this.tipsoff=false
            }, 3000);
        }
    }
</script>

①首先父组件中引用<tips :msg="tipsmsg" ></tips>,
绑定属性msg，然后tipsmsg是需要传给msg的内容，在data中定义，可以后续修改。
②子组件中定义props:['msg']，接收msg，这时候拿到的msg是父组件中的msg传过来的值，也就是把tipsmsg赋给了msg再传给子组件，这样 子组件就能获取父组件的内容或者状态了。
③如下子组件中包含的{{msg}}就是props中获取的msg

    <div :class="['tips',{'tipsoff':tipsoff}]">
        <p class="p1">{{msg}}</p>
    </div>

④当父组件传不同的值时，相应的子组件也会显示不同的内容。

<template>
  <tips :msg="tipsmsg" ></tips>
  <tips :msg="tipsmsg2" ></tips>
</template>

⑤同样的，我们获取到了父组件的msg，也能通过msg的不同，来改变子组件的状态。

这只是组件的vue内容的一小部分。
其余部分请见后面的笔记。