vue.js

最新推荐文章于 2024-09-28 19:02:04 发布

Ambition 落莲

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量112

点赞数

分类专栏：前端 vue.js 文章标签：前端

本文链接：https://blog.csdn.net/weixin_43083484/article/details/84915697

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

vue.js

1 篇文章 0 订阅

订阅专栏

1.vue.js的官网(Angular、Vue.js、React)
https://cn.vuejs.org/

2.什么是vue.js?
Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。

如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。

3.引入vue.js

尝试 Vue.js 最简单的方法是使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

4.vue.js双向数据绑定

<body>
    <div id="app">
        <span>
{{ inputData }}
</span>
        <input type="text" v-model="inputData ">
    </div>
</body>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        inputData : ''
    }})
</script>

5.vue.js的指令
（1）v-text: 用于更新绑定元素中的内容，类似于jQuery的text()方法
（2）v-html: 用于更新绑定元素中的html内容，类似于jQuery的html()方法
（3）v-if: 用于根据表达式的值的真假条件渲染元素，如果为false则不会渲染P标签
（4）v-show: 用于根据表达式的值的真假条件显示隐藏元素，切换元素的 display CSS 属性
（5）v-for: 用于遍历数据渲染元素或模板，则会渲染3个P标签，内容依次为1，2，3
（6）v-on: 用于在元素上绑定事件