初识vue

伊犁彭于晏

已于 2022-05-31 16:39:34 修改

阅读量61

点赞数 1

分类专栏： harのVue 文章标签： vue.js

于 2022-05-31 16:12:45 首次发布

本文链接：https://blog.csdn.net/weixin_44949778/article/details/125067869

版权

harのVue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<body>
<!--准备好一个容器-->
<div id="root">
    <h1>hello,{{name}}</h1>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    //创建vue实例，const定义了一个不可以修改的常量或对象
    new Vue({
        el: '#root', //el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串。
        data: { //data中用于存储数据，数据供el所指定的容器去使用,值我们暂时先写成一个对象。
            name: '尚硅谷'
        }
    })

总结:

想让vue工作，就必须创建一个vue实例，且要传入一个配置对象；
root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法
root容器里的代码被称为【vue模板】
Vue实例和容器是一一对应的
真实开发中只有一个vue实例，并且会配合着组件一起使用
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
注意区分js表达式和js代码（语句）
1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
  1. a
  2. a+b
  3. demo(1)
  4. x === y ? 'a' : 'b'
2. js代码（语句）
  1. if(){} --控制走不走
  2. for(){} --控制走几次