首页 > 其他分享> 文章详细

VUE学习个人纪录01

2022-07-23 10:03:13 阅读：135 来源： 互联网

标签：el VUE name 实例纪录 Vue 01 root data

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VUE学习个人纪录01

vue的开发环境

如何安装

vue初试hello world

1.第一个实例

　　1.第一个实例