-2 Hello World 小案例

1、想让 Vue 工作，必须创建一个 Vue 实例，且传入一个配置对象2、root 容器中的代码被称为 Vue模板3、root 容器里的代码符合 html 规范，只是混入了一个 Vue 语法4、Vue 实例和容器是一一对应的5、真实开发中只有一个 Vue 实例，并且会配合组件一起使用6、{{xxx}}中的 xxx 要写 js表达式，当 data 中的数据发生改变，则页面中用到该数据的地方都将发生

sanda_nd

12247人浏览 · 2022-09-06 20:00:37

sanda_nd · 2022-09-06 20:00:37 发布

目录

一、创建案例

二、总结

一、创建案例

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>Hello {{name}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false

        // 创建 Vue 实例
        new Vue({
            el: '#root', // 指定服务的容器 
            data: { // data 中用于储存数据
                name: '世界'
            }
        })
    </script>
</body>

二、总结

1、想让 Vue 工作，必须创建一个 Vue 实例，且传入一个配置对象

2、root 容器中的代码被称为 Vue模板

3、root 容器里的代码符合 html 规范，只是混入了一个 Vue 语法

4、Vue 实例和容器是一一对应的

5、真实开发中只有一个 Vue 实例，并且会配合组件一起使用

6、{{xxx}}中的 xxx 要写 js表达式 ，当 data 中的数据发生改变，则页面中用到该数据的地方都将发生改变

7、注意区分：js表达式 和 js代码

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

例如：a+b,a,

js代码(语句)

例如：if(){},for(){}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^