vue小结(一)el与data基础部分

2019年6月11日 发表评论 阅读评论

vue是一个简化Dom操作、响应式数据驱动的JavaScript框架,其开发者为尤雨溪,国产开源项目,值得骄傲。中文文档主页为:https://cn.vuejs.org 。近期找了一套教程学习下。有兴趣的同学,可以小额捐赠下,找我要视频和教程相关资料。

一、第一个Vue程序

这里先不涉及vue-cli的使用,先直接引入html页面中使用。使用步骤为:

  • 导入开发版本的Vue.js
  • 创建Vue实例对象, 设置el属性和data属性
  • 使用简洁的模板语法把数据渲染到页面上

我们先写一段简单的代码,如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue基础</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <!-- 开发环境版本,包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el:"#app",
      data:{
        message:" 你好 www.361way.com! "
      }
    })
  </script>
</body>
</html>

此时上面的{{message}},就会被script里的data下的message替换,在页面上正常输出" 你好 www.361way.com! " 。这里我们使用的是div标签,js和页面内容通过id="app"进行链接,其他标签中能不能使用呢?继续往下看。

二、el挂载点

el是element的缩写,el是用来设置Vue实例挂载(管理)的元素。开始之前,我们先看下如下三个问题:

Vue实例的作用范围是什么呢?是否可以使用其他的选择器?是否可以设置其他的dom元素呢?

这里只黏下中间body部分:

<body id="body">
  {{ message }}
  <h2 id="app" class="app">
    {{ message }}
    <span> {{ message }} </span>
  </h2>
  <!-- 开发环境版本,包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      // el:"#app",  //对应的 id选择器
      // el:".app",  //对应的 class选择器
      // el:"div",   //对应的 html类型
      el:"#body",
      data:{
        message:"361way运维之路!"
      }
    })
  </script>
</body>

可以把中间//注释的部分,分别地行尝试。对比下前三个和第四的输出,会发现有如下区别:

vue-el

通过上面的测试可以发现上面的三个问题,对应的解答结果如下:

  • Vue会管理el选项命中的元素及其内部的后代元素
  • 可以使用其他的选择器,但是建议使用ID选择器
  • 可以使用其他的双标签,不能使用HTMLBODY

三、vue data数据

Vue中用到的数据定义在data中,data中可以写复杂类型的数据,渲染复杂类型数据时,遵守js的语法即可。这里也只列下body部分:

<body>
    <div id="app">
        {{ message }}
        <h3> {{ school.site }} {{ school.email }}</h3>
        <ul>
            <li>{{ campus[0] }}</li>
            <li>{{ campus[3] }}</li>
        </ul>
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好 运维之路!",
                school:{
                    site:"www.361way.com",
                    email:"itybku@139.com"
                },
                campus:["北京校区","上海校区","广州校区","深圳校区"]
            }
        })
    </script>
</body>

具体效果如下:

vuedata




本站的发展离不开您的资助,金额随意,欢迎来赏!

You can donate through PayPal.
My paypal id: itybku@139.com
Paypal page: https://www.paypal.me/361way

分类: http/html/web 标签:
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.