vue核心基本的使用——vue指令

vue核心基本的使用——vue指令 理解vue学习vue的条件vue实例的创建vue指令声明式渲染——v-bind条件——v-if列表循环——v-for处理用户动作（事件监听）——v-on事件双向绑定——v-model组件化应用构建

理解vue

vue是一种用于构建用户界面的渐进式框架，核心层只关心视图层，与现代化的工具链以及各种支持类库结合使用时，vue可以为复杂的单页应用提供驱动。

学习vue的条件

学习掌握html、css、JavaScript ;

vue实例的创建

在vue前，需要先创建一个实例接收数据。
创建步骤：
1.创建实例

var app = new Vue({
          el:"#app",
          data:{},
         methods:{}
      })

2.接收实例的容器

 "app">
  

其中，el表示挂载容器的选择器，
data表示需要接收的数据
methods表示要使用到的方法

vue指令 声明式渲染——v-bind

通过使用v-bind指令将模板与dom结合起来，并将模板内容渲染到dom中去。

      鼠标悬停1秒钟
  
  

v-bind可简写成：
这里将data数据挂载到id为app的div容器中，并且绑定在app中的h1，执行结果为

条件——v-if

v-if控制元素的显示隐藏，如果v-if的内容为真，则显示，否则将隐藏。

      {{message}}
  
  

此时，在h1身上添加了v-if=“see”指令，如果see为true，显然message照常显示，如果false,则不显示message的内容。

列表循环——v-for

数组绑定v-for指令来渲染列表，通过v-for指令，将数组当中的每一项都渲染出来。

 
      {{message}}
      
          {{item.id}} {{item.content}}
      
  
  

v-on可简写成@
在实例的methods中创建了al方法——绑定在button上，如果点击了按钮，则d出警示框。

事件双向绑定——v-model

通过v-model指令，实现表单输入与应用状态之间数据的双向绑定

 
      
      
{{text}}