VUE.js-CSDN博客

本文链接：https://blog.csdn.net/qq_29935433/article/details/123319082

VUE.js

JavaScript库

jQuery
Prototype
Mootools

jQuery

jQuery，也就是JavaScript和查询（Query）的组合。拥有完善的Ajax

node.js

nodejs，js运行时环境，相当于JAVA中的JVM

koa2

基于node.js平台的下一代web开发框架，前后端的中间层

Vue.js

一款流行的JavaScript前端框架
其关心的是MVC模式中的视图层

bootstrap

一个用于快速开发Web应用程序和网站的前端框架
jQuery时代的UI组件库
快速构建页面、快速布局
有vue版本的bootstrap-vue

`VUE`

v-if

如果v-if指令的值为假，那么这个元素不会被插入DOM
会有性能开销
```
<div v-if="true">
    one
</div>
```

v-show

没有性能开销（频繁切换某些内容时使用）
该指令使用CSS样式控制元素的显示/隐藏

<div v-show="true">
    one
</div>

<div v-show="false">
    one
</div>
-----------------------
// 输出
<div style="display: none">
    one
</div>

此外，如果元素包含任何图片，那么仅使用CSS隐藏父节点可以使浏览器在图片显示之前就加载它，这意味着一旦v-show变为真值，图片就可以显示出来。如果是v-if指令，图片会直到要显示时才开始加载！

v-else

v-else-if

<div v-if="state === 'loading'">加载中...</div>
<div v-else-if="state === 'error'">出错了</div>
<div v-else>其他</div>

v-for

该指令通过遍历一个数组或者对象，将指令所在的元素循环输出到页面上
同样支持对象的遍历

v-bind

属性绑定。该指令用于将一个值绑定到一个HTML属性上
简写方式，可以省略v-bind部分，用冒号代替

v-html

动态设置HTML
慎用该功能：永远不要将用户输入或者允许用户修改的内容置于v-html中，除非对他们输入的内容提前进行了仔细的校验和转义，不然可能会一不小心允许用户在网站上执行恶意脚本
v-html只用于处理你信任的数据

v-on

可以将v-on:click简写为@click

响应式

使用

第一种方法就是直接在HTML文件中引入，此种方法相对比较简单，直接使用

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
    el: '#vue_det',
    data: data
})
 
document.write(vm.$data === data) // true
document.write("<br>") 
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>

// 双向绑定数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>
</body>
</html>