day1 初识vue

最新推荐文章于 2024-09-17 13:42:29 发布

麻辣香猪シ

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量45

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_51069588/article/details/133801030

版权

1.初识Vue

想让vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
root容器里的代码被称为【Vue模板】；
Vue容器和实例是一一对应的；
真实开发中只有一个Vue实例，并且会配合着组件一起使用；
{{xxx}}中XXX要写js表达式，且xxx可以自动读取到data中的所有数据；
一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新；

注意区分：js表达式和js代码（语句）：

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

(1) a

(2) a+b

(3) dome(1)

(4) x===y ? ‘a’ : ‘b’
js代码（语句）

(1) if（）{}

(2) for(){}

2.Vue模板语法两大类

插值语法：

功能：用于解析标签体内容。

写法：{{xxxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）

举例：v-bind:href=“xxxx” 或简写为 :href=“xxx”, xxx同样要写js表达式，且可以直接读取到data中的所有属性。

备注：Vue中有很多的指令，且形式都是：v-???，此处只是拿v-bind举例。

3.Vue中有两种数据绑定的方式：

单向绑定（v-bind）:数据只能从data流向页面。
双向绑定（v-model）:数据不仅能从data流向页面，还可以从页面流向data。

备注：
- 双向绑定一般都应用在表单类元素上（如：input、select等）
- v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<body>
    <div id="root">
        单向数据绑定：<input type="text" v-bind:value="name"><br/>
        双向数据绑定：<input type="text" v-model:value="name"><br/>
        <h2 v-bind:x="name">你好啊</h2>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip= false  //阻止vue在启动时生成生产提示
        new Vue({
            el:'#root',
            data:{  
                name:'尚硅谷123',
            }
        })
    </script>
</body>