一、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

导包

官方提供了两个包

开发环境版本
生产环境版本

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 开发环境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body></body>
</html>

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}
</div>
</body>
</html>

创建VUE实例

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 开发环境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}
</div>
</body>
<script type="text/javascript">
var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}
})
</script>
</html>

输出结果：

2.2 data

2.2.1 基本语法

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

<span>{{ message}}</span>

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 开发环境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><span>{{ message }}</span> <br>
</div>
</body>
<script type="text/javascript">
var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}
})
</script>
</html>

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

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

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

2.2.2 v-bind绑定元素属性

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 开发环境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><span>{{ message }}</span> <br><span v-bind:title="ads">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span> <br><a v-bind:href="home" target="_blank">戳我有惊喜</a>
</div>
</body>
<script type="text/javascript">
var app = new Vue({el: '#app',data: {message: 'Hello Vue!',ads:'页面加载于 ' + new Date().toLocaleString(),home:'http://www.itcast.cn/'}
})
</script>
</html>

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 开发环境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><span>{{ message }}</span> <br><span :title="ads">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span> <br><a :href="home" target="_blank" title="惊喜">戳我有惊喜</a> <br>  <p v-if="seen">现在你看到我了</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({el: '#app',data: {message: 'Hello Vue!',ads:'页面加载于 ' + new Date().toLocaleString(),home:'http://www.itcast.cn/',seen:true,}
})
</script>
</html>

【seen:true都是小写字母】

效果

2.3.2 v-if和v-else

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

   <a href="#" v-if="islogin">个人中心</a><a href="#" v-else>登录</a>

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

<img src="" alt="皇帝" v-if="level === 1">
<img src="" alt="皇亲" v-else-if="level === 2">
<img src="" alt="国戚" v-else-if="level === 3">
<img src="" alt="大臣" v-else>

【===是完全等于】

2.3.4 v-show

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 开发环境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><p v-if="seen" id="if">现在你看到我了</p><p v-show="seen" id="show">现在你看到我了</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({el: '#app',data: {seen:false}
})
</script>
</html>

效果

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

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

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

vue 简介 el 挂载点 data 数据
目录标题 vue简介 vue案例 el 挂载点 data 数据 vue简介 vue案例 <div id="app">{{ message }}</div>& ...
Vue之props赋值给data 数据变化
问题:当组件props里的某个值(a)(a值要是对象引用类型的数据)赋给了data对象里的某个值 (b); 当a值发生了变化,b值还是最开始的a值, 但实际应该是b值是最新的a值例如: <te ...
Vue 条件渲染列表绚烂双向数据处理
Vue 条件渲染列表绚烂双向数据处理文章目录 Vue 条件渲染列表绚烂双向数据处理 1.style和class 2.条件渲染 3.列表渲染 3.1.v-for 循环数组,循环字符串,数字对象 ...
VUE的data数据对象
data:数据对象: ◆Vue中用到的数据定义在data中 ◆data中可以写复杂类型的数据 ◆渲染复杂类型数据时,遵守js的语法即可结果: 代码: <!DOCTYPE html> &l ...
vue data数据修改_史上最强vue总结，万字长文
vue框架篇 vue的优点轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb: 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习: 双向数据绑定:保留了angular ...
vue data数据修改_Vue 超清晰思维导图（7张），详细知识点梳理！
Vue思维导图目录 MVC与MVVM的区别 Vue基本代码结构 Vue指令 Vue组件 class和style动态绑定 computed计算属性 EventBus filter过滤器方法 Vue是一套 ...
Vue 在beaforeCreate时获取data中的数据
众所周知,vue在beforecreate时期是获取不到data中的数据的但是通过一些方法可以实现在beforecreate时获取到data中的数据暂时想到两种放发可以实现,vue在before ...
在vue开发中会遇到methods方法里有一个函数嵌套另一个函数，最内层函数this取不到data数据，该怎么解决？
一,问题在vue的methods方法中两个函数互相嵌套,最内层函数this取不到data数据二,原因 this的指向问题三,解决方法 (1)给最外层函数this重新赋值给一个变量 methods ...
vue使用参数直接取到data数据
vue使用参数直接取到data数据 upRecvQtyStatus (row, name) {console.log(this._data[name]) // this._data就是data本身th ...

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