首页 > 代码库 > 快速入门Vue

快速入门Vue

2024-09-17 07:24:30   219人阅读

前端技术发展很快，近日一个项目中想用Vue框架，对此对Vue基础进行了一些学习整理

何为Vue，官网 解释Vue.js（读音 /vju?/，类似于 view） 是一套构建用户界面的渐进式框架

这里记录主要是关于Vue中基础渲染DOM的一些操作

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <!-- moblile use -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <title>vue测试</title>   
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style type="text/css">
        *{font-size: 16px;}
    </style>
</head>

<body>
    <div class="wrap">
        <!-- 内容层 -->
        <div class="content">
            <h1 class="bannerPic">vue测试</h1>
        </div>
    </div>
    <div id="app">
          <p>{{ message }}</p>
          <input type="text" v-model="message"/>

          <h2 v-if="h2yes">显示这块内容</h2>
          <!-- if不会渲染DOM，show是设置display显隐 -->
          <h2 v-show="h2yes">显示这块内容</h2>
          <p v-if="age>5">年龄{{age}}岁</p>
          <p v-else >年龄小于5岁</p>

          <!-- 事件绑定 -->
          <button v-on:click="say(‘Hi‘)">Hi</button>
          <!--缩写语法-->
          <button @click="greet">Greet</button>
          <!--完整语法-->
        <div v-for="n in age">
            <a v-bind:class="now === n ? ‘active‘ : ‘‘">{{ n }}</a>
            <!--缩写语法-->
            <a :class="now === n ? ‘active‘ : ‘‘">{{ n }}</a>
        </div>


            
    </div>
    <!-- 遍历 -->
    <ul class="list">
        <li v-for="(item,index) in people">
            <p>{{index}} 姓名:{{item.name}} 年龄:{{item.age}} 性别:{{item.sex}}</p>
        </li>
    </ul>


    <script type="text/javascript">
        new Vue({
          el: ‘#app‘,
          data: {
            message: ‘Hello Vue‘,
            h2yes:false,
            age: 5,
            now: 2
          },
          methods: {
              say: function(m){
                  alert(m);
              },
              greet: function(){
                  alert(this.message);
              }
          }
        });

        var listData = {people: [{
                    name: ‘Jack‘,
                    age: 30,
                    sex: ‘Male‘
                }, {
                    name: ‘Bill‘,
                    age: 26,
                    sex: ‘Male‘
                }, {
                    name: ‘Tracy‘,
                    age: 22,
                    sex: ‘Female‘
                }, {
                    name: ‘Chris‘,
                    age: 36,
                    sex: ‘Male‘
                }]};
        var v1 = new Vue({
            el:‘.list‘,
            data:listData
        })
    </script>
</body>
</html>

 学习参考链接：

http://www.cnblogs.com/rik28/p/6024425.html

快速入门Vue


联系
我们