Vue之概述、基本使用、data数据和if条件渲染

一、Vue概述

Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。

Vue.js读音 /vjuː/, 类似于 view

Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API

Vue.js是一个构建数据驱动的Web界面的库

Vue.js是一套构建用户界面的 渐进式框架

通俗的说:

• Vue.js是一个构建数据驱动的 web 界面的渐进式框架

• Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

• 核心是一个响应的数据绑定系统

vue的作者

尤雨溪是Vue.js框架的作者，他认为，未来App的趋势是轻量化和细化，能解决问题的应用就是好应用。而在移动互联网时代大的背景下，个人开发者的机遇在门槛低，成本低，跨设备和多平台四个方面。

Vue.js使用文档及下载Vue.js

Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看：https://cn.vuejs.org/v2/guide/

vue.js如果当成一个库来使用，可以通过下面地址下载：https://cn.vuejs.org/v2/guide/installation.html

可视化学习网站:https://scrimba.com/playlist/pXKqta

二、Vue基本使用 2.1 第一个 Vue 应用

文档：https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5

• 导包

官方提供了两个包

• 开发环境版本

• 生产环境版本

• 采用模板语法来声明式地将数据渲染进 DOM 的系统

    
    
    



  {{ message }}

• 创建VUE实例

    
    
    
    



  {{ message }}



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

输出结果：

2.2 data 2.2.1 基本语法

数据绑定最常见的形式就是使用“Mustache(胡子)”语法 (双大括号) 的文本插值

{{ message}}

Mustache 标签将会被替代为对应数据对象上message属性的值。无论何时，绑定的数据对象上message属性发生了改变，插值处的内容都会更新

    
    
    
    



  {{ message }} 



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

通过chrome浏览器的快捷键ctrl+shift+i或者F12来展示调试工具

我们也可以通过改变Vue的分隔符来修改Mustache 标签

【vue的大胡子语法和django和flask模板的语法冲突了，所以要修改】

2.2.2 v-bind绑定元素属性

    
    
    
    



  {{ message }} 
   鼠标悬停几秒钟查看此处动态绑定的提示信息！ 
   戳我有惊喜



var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    ads:'页面加载于 ' + new Date().toLocaleString(),
    home:'http://www.itcast.cn/'
  }
})

v-bind: 简写 :

文档：https://cn.vuejs.org/v2/guide/syntax.html#v-bind-%E7%BC%A9%E5%86%99

2.3 if条件渲染

通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)

• v-if

• v-else-if

• v-else

• v-show

2.3.1 v-if

    
    
    
    



  {{ message }} 
   鼠标悬停几秒钟查看此处动态绑定的提示信息！ 
   戳我有惊喜   
   
现在你看到我了



var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    ads:'页面加载于 ' + new Date().toLocaleString(),
    home:'http://www.itcast.cn/',
    seen:true,
  }
})

【seen:true都是小写字母】

效果

2.3.2 v-if和v-else

文档：https://cn.vuejs.org/v2/guide/conditional.html#v-else

   个人中心
   登录

v-else要紧跟 v-if后边

2.3.3 v-if,v-else-if和v-else

文档：https://cn.vuejs.org/v2/guide/conditional.html#v-else-if 

【===是完全等于】

2.3.4 v-show

    
    
    
    



   
现在你看到我了
   
现在你看到我了



var app = new Vue({
  el: '#app',
  data: {
    seen:false
  }
})

效果

v-show用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的

注意在vue中使用v-show, 原来的css代码不能设置display属性, 会导致冲突