初识Vue

凉宸清故

已于 2022-04-03 17:05:42 修改

阅读量641

点赞数

文章标签： vue.js

于 2022-04-03 16:37:55 首次发布

本文链接：https://blog.csdn.net/a941257798/article/details/123939262

版权

1.初识Vue

①想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；

②app容器中的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

③app容器里的代码被称为{Vue模板}；

④引入的vue.js是生产模式的，会有生产提示； vue.min.js是上线时使用的，没有生产提示且体积更小

⑤Vue实例和容器是一一对应的；

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

⑦{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；插值语法

⑧一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新；

⑨Vue.config.productionTip = false 阻止 vue 在启动时生成生产提示

<div id="app">
    <h3>{{name}}</h3> //插值语法
    <h3>{{age}}</h3>
</div>
<script>
    Vue.config.productionTip = false  //阻止 vue 在启动时生成生产提示
    //创建Vue实例
    new Vue({
        el:'#app', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data:{  //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
            name:'张三',
            age:18
        }
    })
</script>

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

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

（1）. a

（2）. a+b

（3）. demo(1） (引用函数)

（4）. x === y ？ 'a' : 'b' （三元表达式）

②.js代码（语句）

（1）. if(){}

（2）. for(){}