2、介绍-vue渐进式javascript框架基础

vue是一套构建用户界面的的 渐进式框架 ，与其他框架不同的是，vue被设计为自低向上逐层应用。vue核心库只关心视图层，较容易上手、

起步

创建一个.html文件通过以下方式引入vue：

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

或者：

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

声明式渲染

vue.js核心是采用简洁的模板语法来声明式的将数据渲染进dom的系统：

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

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

看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。数据和DOM已经进行关联，所有东西都是 响应式 的。修改app.message的值，你将看到页面上也相应地更新。

除了文本插值，还可以像这样进行元素绑定

<div id="app-2">
    <span v-bind:title="message">鼠标悬停查看提示信息</span>
</div>

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

条件与循环

使用v-if进行条件渲染
<div id="app-3">
<p v-if="is_show">现在你看到我了</p>
</div>
var app3=new Vue({
el:"app-3",
data:{
is_show:true
}
})
使用v-for循环渲染列表
<div id="app-4" >
<ol>
<li v-for="todo in todos">{{todo.text}}</li>
</ol>
</div>
var app4=new Vue({
el:"#app-4",
data:{
todos:[
{text:"test1"},
{text:"test2"},
{text:"test3"},
]
}
})
在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。

处理用户输入

使用v-on添加事件监听器
<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('')
}
}
})
上面操作中，没有触碰dom操作，所有的dom操作都交由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!'
}
})
组件化应用构建

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

在vue中本质上是一个拥有预定义选项的一个vue实例，在vue中注册组件很简单:

//定义为todo-item的组件
Vue.component("todo-item",{
    template:"<li>这是一个todo-item组件</li>"
})

构架一个组件模板

<ul>
    <todo-item></todo-item>
</ul>

渲染的时候可以选择使用父级组件传递数据到子组件进行渲染，修改一下组件的定义，使之能够接受一个prop：

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

现在可以使用v-bind将数据循环输出到对应控件

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

在一个大型应用中，有必要将程序划分为若干组件，使开发管理更简单。

#与自定义元素的关系

vue组件非常类似于 自定义元素 它是web组件规范的一部分，这是因为vue组件语法部分参考了改规范。

例如vue组件实现了 Slot API 与 is 的特性，但还是有一定差别：

Web Components 规范已完成并通过，但未被所有浏览器原生实现，目前Safari 10.1+、Chrome 54+和Firefox 63+支持。相比之下 Vue组件不需要任何polyfill，且在所有支持的浏览器(IE9以上)表现一致。必要时也可以包装于原生自定义元素内
Vue组件提供了纯自定义元素所不具备的一些功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

虽然 Vue 内部没有使用自定义元素，不过在应用使用自定义元素、或以自定义元素形式发布时，依然有很好的互操作性。Vue CLI 也支持将 Vue 组件构建成为原生的自定义元素。