初识Vue

zmm_mohua

已于 2022-05-09 19:27:49 修改

阅读量344

点赞数

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

于 2022-02-19 14:14:49 首次发布

本文链接：https://blog.csdn.net/qq_42250642/article/details/123017741

版权

vue学习记录专栏收录该内容

21 篇文章 1 订阅

订阅专栏

"这篇博客介绍了如何入门Vue，通过创建Vue实例与指定`el`属性来关联HTML容器。文中提到Vue模板的概念，即在`#root`容器内混入Vue语法，如`{{name.toUpperCase()}

摘要由CSDN通过智能技术生成

初识Vue

ps：第一次见面呀，vue

小结

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；new Vue({ el:'#root', //el(element)用于指定当前Vue实例为哪个容器服务，值通常为css选择器 })
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(){}

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>初始Vue</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--准备一个容器-->
        <div id="root"> 
            <h1>hello,{{name.toUpperCase()}}!{{address}}</h1>
        </div>

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

            //创建Vue实例
            new Vue({
                el:'#root',  //el(element)用于指定当前Vue实例为哪个容器服务，值通常为css选择器
                data:{   //data中用于存储数据，数据供el所指定的容器去使用
                    name:'world',
                    address:'湖南长沙'
                }
            })
        </script>
    </body>
</html>