Vue学习笔记（三）vue实例与传入配置对象

Vincy.Zhang

已于 2022-11-16 16:15:58 修改

阅读量745

点赞数

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

于 2022-11-15 11:05:43 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43041350/article/details/127850566

版权

Vue 专栏收录该内容

9 篇文章

订阅专栏

示例

强制刷新：
对页面强制刷新，切到页面开发工具-NETWORK，
按住shift再刷新

1.先准备一个div容器
2.创建vue实例，传入配置对象
3.容器里变化的数据交给 vue实例
4.root里的代码称为vue模板
6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性;
7. 一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新。

注意区分js表达式和js代码(语句)
    1. 表达式：一个表达式会产生一个值，可以放到任何一个需要值的地方。
        (1). a
        (2). a+b
        (3). demo(1)
        (4). x === y ? 'a' : 'b'
    2. js代码(语句)
        (1). if(){}
        (2). for(){}

<body>
<div id="root">
<h1>Hello,{{name}}</h1>
</div>
    <script>
        Vue.Config.productionTip = false;//阻止 vue 在启动时生成生产提示。

        //创建vue实例
        new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为css选择器
            //el也可以这么写 el：document.getElementById('root')
            data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name:'test'
            }
        }
        )
    </script>
</body>