VUE.js_Java

VUE.js

文章目录

VUE.js

Javascript库jQuerynode.jskoa2Vue.jsbootstrap`VUE`

v-ifv-showv-elsev-else-ifv-forv-bindv-htmlv-on响应式使用methodscomputedwatcherswatchfiltersmethodscomputedwatcherswatchfilters

Javascript库

jQueryPrototypeMootools

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

会有性能开销

one

v-show

没有性能开销（频繁切换某些内容时使用）

该指令使用CSS样式控制元素的显示/隐藏

    one



    one

-----------------------
// 输出

    one

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

v-else v-else-if

加载中...
出错了
其他

v-for

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

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

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

可以将v-on:click简写为@click 响应式使用

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

    site : {{site}}
    url : {{url}}
    Alexa : {{alexa}}

// 双向绑定数据




Vue 测试实例 - 菜鸟教程(runoob.com)




    {{ message }}

methods computed watchers watch

监听data对象中某个对象的属性 filters

message: 'Runoob!'

}
})

``` methods computed watchers watch

监听data对象中某个对象的属性 filters

VUE.js