【vue基础】

最新推荐文章于 2024-07-20 18:05:54 发布

落雪映青衣、

最新推荐文章于 2024-07-20 18:05:54 发布

阅读量189

点赞数

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

本文链接：https://blog.csdn.net/qq_41975698/article/details/125939940

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

vue基础使用

Vue.js（简称Vue）是一套用于构建用户界面的渐进式前端框架。
Vue.js 核心实现：
• 响应式的数据绑定：当数据发生改变，视图可以自动更新，不用关心DOM操作，而专心数据操作。
• 可组合的视图组件：把视图按照功能切分成若干基本单元，可维护，可重用，可测试等特点。
官网：https://v3.cn.vuejs.org/
使用Vue的四种方式：
• 在HTML中以CDN包的形式导入
• 下载JS文件保存到本地再导入
• 使用npm安装
• 使用官方VueCli脚手架构建项目（不建议新手直接用）
参考文档：https://v3.cn.vuejs.org/guide/installation.html
一个简单的vue示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="a">
    {{ message }} //ps：挺像ansible的变量用法
</div>
<script>
  const VueOne = {
      data () {
          return{
              message: 'This is Vue'
          }
      }
  }
  Vue.createApp(VueOne).mount("#a")
</script>
</body>
</html>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM 的系统

<div id="a">
    Counter: {{ counter }}
</div>
<script>
    const b = {
        data () {
            return{
                counter: 0
            }
        }
    }
    Vue.createApp(b).mount('#a')

现在数据和DOM已经被建立了关联，所有东西都是响应式的，可通过下面示例确认：

<div id="a">
    Counter: {{ counter }}
</div>
<script>
    const b = {
        data () {
            return{
                counter: 0
            }
        },mounted() {//mounted方法在html加载完成后执行
            setInterval(() =>{//vue中使用定时器setInterval，应该使用箭头函数
                this.counter++
            },1000)//1000是1000毫秒也就是一秒
        }
    }
    Vue.createApp(b).mount('#a')