Vue.js入门

最新推荐文章于 2023-10-02 13:34:22 发布

dq_pp

最新推荐文章于 2023-10-02 13:34:22 发布

阅读量631

点赞数

分类专栏： JavaScript相关文章标签：库 javascript vue-js

本文链接：https://blog.csdn.net/dq_pp/article/details/70256986

版权

JavaScript相关专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Vue.js是一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。
Vue.js简单实例：

<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js实例</title>
</head>
<body>
<!-- View开始-->
    <div id="msg">
    {{message}}
    </div>
    <!-- View结束-->
</body>
<script type="text/javascript">
 <!-- Model开始-->
    var exampleData={
      message:"panda"
       }
    <!-- Model结束-->
     <!-- ViewModel开始-->
      new Vue  ({
        el:"#msg",
        data:exampleData
        })
    <!-- ViewModel结束-->
    </script>
</html>

MVVM模式本身实现了双向绑定，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。

<div id="msg">
    <p>{{message}}</p> 
    <input type="text" v-model="message">
</div>

Vue.js提供了一些常用的内置指令
①v-if指令
是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：
v-if=”expression”
expression是一个返回布尔值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。如：

    <html>
        <head>
            <meta charset="utf-8">
            <title>Vue.js实例</title>
             <script src="http://cdn.bootcss.com/vue/2.2.5/vue.js"></script>
        </head>
        <body>
            <div id="msg">
                 <h1>hello,Vue.js</h1>
                 <h1 v-if="yes">yes!</h1>
                 <h1 v-if="no">no!</h1>
                 <h1 v-if="age >=18">age:{{age}}</h1>
                 <h1 v-if="name.indexOf('panda') >=0">name:{{name}}</h1>
            </div>
            <script type="text/javascript">
              new Vue  ({
                el:'#msg',
                data:{
                    yes:true,
                    no:false,
                    age:20;
                    name:'lidequan'
                }
            })
            </script>
        </body>
    </html>

预览效果：
这里写图片描述
②v-show指令
是条件渲染指令，使用其指令的元素始终会被渲染到HTML，它只是简单的为元素设置CSS的style属性。

<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js实例</title>
     <script src="http://cdn.bootcss.com/vue/2.2.5/vue.js"></script>
</head>
<body>
    <div id="msg">
         <h1>hello,Vue.js</h1>
         <h1 v-show="yes">yes!</h1>
         <h1 v-show="no">no!</h1>
         <h1 v-show="age >=18">age:{{age}}</h1>
         <h1 v-show="name.indexOf('panda') >=0">name:{{name}}</h1>
    </div>
    <script type="text/javascript">
      new Vue  ({
        el:'#msg',
        data:{
            yes:true,
            no:false,
            age:20,
            name:'lidequan'
        }
        })
    </script>
</body>
</html>

预览效果
这里写图片描述
③v-else指令
可以用v-else指令为v-if指令或者v-show指令添加一个“else”块，v-else元素必须立即跟在v-if或者v-show元素的后面，否则不能被识别。如

<html>
    <head>
        <meta charset="utf-8">
        <title>Vue.js实例</title>
         <script src="http://cdn.bootcss.com/vue/2.2.5/vue.js"></script>
    </head>
    <body>
        <div id="msg">
             <h1 v-if="age >=18">age:{{age}}</h1>
             <h1 v-else>name:{{name}}</h1>
             <h1>分割线</h1>
             <h1 v-if="name.indexOf('panda') >=0">name:{{name}}</h1>
             <h1 v-else>sex:{{sex}}</h1>
        </div>
        <script type="text/javascript">
          new Vue  ({
            el:'#msg',
            data:{
                age:20,
                name:'panda',
                sex:'男'
            }
            })
        </script>
    </body>
</html>

预览效果：

注意：v-else元素是否渲染到HTML页面，取决于前面使用v-if还是v-show;如果v-if为ture,后面的v-else不会渲染到html;如果v-show为ture,后面的v-else还会渲染到html;
④v-for指令
基于一个数组渲染一个列表，它和JavaScript的遍历语法相似。如：

<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js实例</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
     <script src="http://cdn.bootcss.com/vue/1.0.20/vue.js"></script>
</head>
<body>
    <div id="msg">
         <table class="table table-bordered">
             <thead>
                 <tr>  
                    <td>name</td>
                    <td>age</td>
                 </tr>
             </thead>
             <tbody>
                 <tr v-for="person in people">
                     <td>{{person.name}}</td>
                     <td>{{person.age}}</td>
                 </tr>
             </tbody>
         </table>
    </div>
    <script type="text/javascript">
      new Vue  ({
        el:'#msg',
        data:{
           people:[{
             age:20,
            name:'panda'
           },
           {
             age:20,
            name:'lidequan'
           },
           {
             age:20,
            name:'pps'
           },
           {
             age:20,
            name:'dqs'
           },]

        }
        })
    </script>
</body>
</html>

预览效果：
这里写图片描述
⑤v-bind指令可以缩写为冒号
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性，如v-bind：class
v-bind：agruments=”expression”如：

<html>
<head>
    <meta charset="utf-8">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
     <script src="http://cdn.bootcss.com/vue/1.0.20/vue.js"></script>
</head>
<body>
    <div id="msg">
         <ul class="pagination">
             <li v-for="n in pageCount" v-bind:class="activeNumber === n+1 ? 'active' : ''">
                 <a href="javasscript:;" >{{n+1}}</a>
             </li>
         </ul>
    </div>
    <script type="text/javascript">
      new Vue  ({
        el:'#msg',
        data:{
            activeNumber:2,
            pageCount:8
        }
    })
    </script>
</body>
</html>

预览效果
这里写图片描述
⑥v-on指令 可以缩写为@
v-on指令用于监听DOM事件，用法与v-bind相似。如：

<html>
    <head>
        <meta charset="utf-8">
        <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
         <script src="http://cdn.bootcss.com/vue/1.0.20/vue.js"></script>
    </head>
    <body>
        <div id="msg"style="width:300px;height:300px;margin:0 auto" >
             <p><input type="text" v-model="message"></p>
             <p>
                <button v-on:click="greet" style="width:100px;height:40px"></button>
             </p>
             <p>
                <button v-on:click="say('hi')">hi</button>
             </p>
        </div>
        <script type="text/javascript">
          new Vue  ({
            el:'#msg',
            data:{
                message:"hello vueJs"
            },
            methods:{
                greet:function(){
                    alert(this.message)
                },
                say:function(msg){
                    alert(msg)
                }
            }
        })
        </script>
    </body>
</html>

这里写图片描述
小例子，如下：

<html>
    <head>
        <meta charset="utf-8">
        <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
         <script src="http://cdn.bootcss.com/vue/1.0.20/vue.js"></script>
    </head>
    <body>
        <div id="msg"  style="width:600px;min-height:500px;margin:0 auto" >
            <fieldset>
                <legend>添加</legend>
                <div class="form-group">
                    <label>姓名</label>
                    <input type="text" v-model="newPerson.name"/>
                </div>
                <div class="form-group">
                    <label>年龄</label>
                    <input type="text" v-model="newPerson.age"/>
                </div>
                <div class="form-group">
                    <label>性别</label>
                    <select  v-model="newPerson.sex"/>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label></label>
                    <button @click="createPerson" class="btn btn-info" style="width:100px;height:30px;" >添加</button>
                </div>
            </fieldset>
             <table class="table table-striped">
                 <thead>
                    <tr>
                         <th>姓名</th>
                         <th>年龄</th>
                         <th>性别</th>
                         <th>删除</th>
                    </tr> 
                 </thead>
                 <tbody>
                     <tr v-for="person in people">
                         <td>{{person.name}}</td>
                         <td>{{person.age}}</td>
                         <td>{{person.sex}}</td>
                         <td :class="text-center"><button @click="deletePerson($index)" style="width:100px;height:30px;">删除</button></td>
                     </tr>
                 </tbody>
             </table>

        </div>
        <script type="text/javascript">
          new Vue  ({
            el:'#msg',
            data:{
                newPerson:{
                    name:"",
                    age:0,
                    sex:'男'
                },
                people:[{
                    name:'panda',
                    age:18,
                    sex:'女'
                },
                {
                    name:'pp',
                    age:12,
                    sex:'女'
                },
                {
                name:'pps',
                    age:18,
                    sex:'女'
                },
                {
                name:'dq',
                    age:18,
                    sex:'男'
                }]


            },
            methods:{
                createPerson:function(){
                    this.people.push(this.newPerson);
                    this.newPerson={name:'',age:0,sex:'男'}
                },
                deletePerson:function(index){
                     this.people.splice(index,1)
                }
            }
        })
        </script>
    </body>
</html>

预览效果

这里写图片描述

dq_pp

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js入门

Vue.js是一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。 Vue.js简单实例：<html><head> <meta charset="utf-8"> <title>Vue.js实例</title></head><body> <div id="msg"> {{message}} </div>
复制链接

扫一扫

专栏目录