首页 > 其他分享> > Vue.js学习2020.02.02

Vue.js学习2020.02.02

2020-02-02 21:01:56 作者：互联网

1. Vue.js安装（三种引入方式）

  官方指导网站： https://cn.vuejs.org/v2/guide/installation.html
  事先安装好**WebStorm**或者**VSCode**编辑器

1. CDN引入

   1.  <!-- 开发环境版本，制作原型或学习，为最新版本，包含有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   2. <!-- 生产环境版本，优化了尺寸和速度 -->
          <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    3.<!-- 生产环境，推荐链接到明确版本号和构建文件，避免新版本造成的不可预期的破坏-->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
        
        开发环境下不要使用生产版本，否则失去所有常见错误相关的警告!

2. 下载和引入

官网下载js文件，放在项目目录下
开发版本：Vue.js文件生产版本：Vue.min.js文件

3. NPM安装

后续webpack和CLI的使用，直接采用NPM安装方式

2. Vue.js初步体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <!--如果是class，则下面el用.-->
   <!--如果是id，则下面el用#-->
   <div class="first">
       {{name}},{{age}},{{address}}
   </div>

   <div id ="second">
       {{name}},{{age}},{{address}}
   </div>

   <!--引入Vue.js,。。代表上一级目录-->
   <script src="../js/vue.js"></script>
   <script>
       //let(变量)   const(常量)  ES6的语法   MVVM模式
       // 界面调试： 可以用app.name
       const app = new Vue({  // Vue对象，名称必须是Vue
           el: ".first",   // 与div模块的id或者class一样
           data:{          //  具体要展示的数据
               name: "舒展",
               age: "27",
               address: "陕西省富平县",
           }
       })

       // 不同变量命名不能相同
       const sk = new Vue({
           el: "#second",
           data: {
               name: "Lucy",
               age: "24",
               address: "湖南长沙",
           }
       })
   </script>
</body>
</html>

weixin_43374578 发布了7 篇原创文章 · 获赞 0 · 访问量 121 私信关注

标签：02,Vue,const,name,age,2020.02,js,address
来源： https://blog.csdn.net/weixin_43374578/article/details/103744800