Vue基础入门与环境搭建

最新推荐文章于 2025-04-17 17:05:26 发布

实习期小潘

最新推荐文章于 2025-04-17 17:05:26 发布

阅读量2k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/m0_60264901/article/details/123293485

版权

笔记专栏收录该内容

27 篇文章

订阅专栏

终于媳妇熬成婆，终于轮到我学Vue啦！

VUE基础

使用Vue步骤：（初始Vue）

1.首先必须创建一个Vue实例，且要传入一个配置对象

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法

3.root容器里的代码被称为【Vue模板】

4.vue实例和容器是一一对应的

5.真实开发中只有一个vue实例，且会配合着组件一起使用

6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性

7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

Step1:放一个容器

<!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello,{{name.toUpperCase()}}</h1>
        <!-- {{xxx}}里面是js的表达式 -->
    </div>

⚡注意：{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性

补充知识点：js表达式 VS js代码(语句)

js表达式：一个表达式会产生一个值，可以放任何一个需要值的地方：

a
a+b
demo(1)
x===y?'a':'b'（三元表达式）

js代码(语句)

if(){ }
for(){ }

Step2:创建Vue

<script type="text/javascript">
        Vue.config.productionTip = false; //搭建好了Vue环境 阻止vue在启动时生成生产提示

        // 创建Vue实例
        new Vue({
            el: '#root', 
           //el表示指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: {      
           //data种用于存储数据，数据el所指定的容器去使用，值得我们暂时先写成一个对象。
                name: 'psy' 
           //当data对象里面内容更改就使页面上的内容也改变
            }
        })
    </script>