首页 > 其他分享> > VUE学习个人纪录01

VUE学习个人纪录01

2022-07-23 10:03:13 作者：互联网

vue的开发环境

如何安装

　　这里为VUE的官方下载地址：　安装 — Vue.js (vuejs.org)

　　- 通过<script>标签引入

　　开发版本体积大包含警告，能够及时弹出警告帮助修改问题；生产版本体积较小无警告，适合使用时缩小项目体积。

　　新建项目在script标签中根据自己的情况声明文件地址（此处导入为开发版)

　　-CDN

　　此处为开发板

　　此处为生产版

　　-使用NPM引入

　　安装完毕后可以打开网页检查安装情况，下载相应插件

vue初试hello world

　　1.第一个实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue01</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<!-- 
    初识vue：
    1.在vue工作前，需要先创建一个实例，且传入一个配置对象；
    2.容器里的代码被称为vue模板
 -->

<body>
    <div id="root">
        <h1>hello world,next {{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //禁止vue在启动时生成提示
            //创建vue实例
        const x = new Vue({
            el: '#root',
            //el(element):用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data: {
                name: 'input name '
                    //data中用于存储数据，数据供el指定容器使用，与css类似
            }

        })
    </script>
</body>

</html>

　　当通过id属性选择时，vue可以准确定位到目标内；但当属性为class时，仅改变div与el内属性名称不能实现对多个同名块的修改。

<body>
    <div class="root">
        <h1>hello world,next {{name}}</h1>
    </div>
    <div class="root">
        <h1>hello world,next {{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false 
        const x = new Vue({
            el: '.root',
            data: {
                name: 'input name '                
            }
        })
    </script>
</body>

以下为浏览器的运行结果

可见，容器与实例不存在多对一的关系，那么当我们选择使用多个实例对一个容器处理时会产生什么效果呢？

<body>
    <div class="root">
        <h1>hello world,next {{name}},and{{name2}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '.root',
            data: {
                name: 'input name '
            }
        })
        new Vue({
            el: '.root',
            data: {
                and: 'input name2 '
            }
        })
    </script>
</body>

网页并没有出现name2，这意味着容器与实例不存在对一的关系，即两者只存在一一对应的关系。

总结：

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

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;3,root容器里的代码被称为【Vue模板】;

4.Vue实例和容器是一一对应的;

5.真实开发中只有一个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(){}

标签：el,VUE,name,实例,纪录,Vue,01,root,data
来源： https://www.cnblogs.com/RIKILen/p/16505311.html

VUE学习个人纪录01

vue的开发环境

如何安装

vue初试hello world

1.第一个实例

　　1.第一个实例