vuejs之第一个vue程序

发布时间：2020-12-16 23:04:16 所属栏目：百科来源：网络整理

导读：html head script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" / script / body div id ="app" {{ message }} div var app = new Vue({ el: '#app',data: { message: 'Hello Vue!' } }); 结果：（1）首先要引入https://cdn.jsdelivr.net/npm/vue/

<html>

head>
  script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</bodydiv id="app">
    {{ message }}
  div
    var app = new Vue({
      el: '#app',data: {
        message: 'Hello Vue!'
      }
    });
  >

结果：

（1）首先要引入https://cdn.jsdelivr.net/npm/vue/dist/vue.js，相当于引入Jquery那样。

（2）在创建一个Vue对象时需要关注两个参数，一个是挂载点el，另一个是数据data。

（3）挂载点el：挂载点用于定位哪个标签，可以使用id选择器、类选择器和标签选择器，一般建议使用id选择器。因为一般在开发中id是唯一的，而类名可以是不唯一的。

（4）在获取数据是，利用{{}}。

（5）Vue实例的作用范围：el选项中命中的元素以及其内部的后代元素。

（6）Vue是否可以设置其他的DOM元素：可以，但是不能使用html和body标签。

（7）data数据中可以存储复杂的对象：

="app" class>
    ul>
      li>{{ message }}>{{school.name}}>{{school.age}}>{{hobby[0]}}>{{hobby[1]}}>

  
    var app = new Vue({
      el: '.app',data: {
        message: 'Hello Vue!',school: {
          name: "张三",age: 18,},hobby: ["gameing","reading"]
      }
    });
  >

渲染数据类型时，遵守js的语法即可。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!