首页 > 代码库 > Vue.js 初识

Vue.js 初识

2024-10-29 22:43:02   206人阅读

Vue核心库只关注视图层，它不仅易于上手，还便于与第三方或既有项目整合。

前置知识：

  • html+css的基础知识
  • Javascript的基础知识
  • node.js初级知识

实践体验：

  • 轻量级的框架
  • 性能优秀
  • MVVM模式

首先引入Vue.js

通过官方网站：http://vuejs.org/下载Vue.js

 

编写Vue.js的第一个程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src=http://www.mamicode.com/"https://unpkg.com/vue"></script>
    <title>Helloworld</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:‘ #app‘,     //获取作用域id  
            data: {        //数据绑定
                message:‘hello Vue!‘
            }
        })
    </script>
</body>
</html>
Hello World   //页面输出

 

v-if   v-else  v-show  指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src=http://www.mamicode.com/"https://unpkg.com/vue"></script>
    <title>v-if / v-show / v-else</title>
</head>
<body>
    <div id="app">
        <div v-if="man">你好：这位先生</div>
        <div v-else>你好：这位女士</div> 
　　　　<div v-show="isShow">欢迎您的到来。</div>
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:‘ #app‘,
            data:{
               man: false,
               isShow: true
            }
        })
    </script>
</body>
</html>

v-if~v-else 和 if(){}else{}有异曲同工之处，data定义的man为（false）时，“你好：这位先生隐藏”；“你好：这位女士”显示。

v-show改变css中display属性，DOM元素已加载。

v-for 指令

v-for指令用于循环渲染一组data中的数组，语法：v-for="item in items"；items 是源数据数组，item是数组元素迭代的别名。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue"></script>
    <title>V-for 指令</title>
</head>
<body>
    <div id="app">
       <ol>
           <li v-for="item in items">
                {{item}}
           </li>
       </ol>
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:‘#app‘,
            data:{
                items:[10,20,30,40,50,60,70,80]
            }
        })
    </script>
</body>
</html>

 

有序列表循环渲染输出。

v-text 与 v-html

javascript中html标签用v-text无法输出，v-html标签可以输出html标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue"></script>
    <title>v-text / v-html</title>
</head>
<body>
    <div id="app">
        <span>{{ message }}</span>=<span v-text="message"></span><br/>
        <span v-html="meHtml"></span>
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el: ‘#app‘,
            data: {
                message: ‘hello Vue.js!‘,
                meHtml: ‘<strong>hello Vue.js!</strong>‘
            }
        })
    </script>
</body>
</html>

页面渲染输出：hello Vue.js!=hello Vue.js!  ； 加粗的hello Vue.js!

v-on 绑定事件监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue"></script>
    <title>v-on事件监听器</title>
</head>
<body>
    <div id="app">
       考试成绩： {{count}}<br/>
       <button v-on:click="jiafen">加分</button>
       <button v-on:click="jianfen">减分</button>
 
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el: ‘#app‘,
            data: {
                count:1
            },
            methods: {
                jiafen:function() {
                    this.count++;
                },
                jianfen:function() {
                    this.count--;
                }
            }
        })
    </script>
</body>
</html>

此处着重提一下：(v-on:  )可以用@来代写，用简写可以提高效率，减少代码量。

v-model 指令

v-model 实现数据的双向绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue"></script>
    <title>v-model 数据双向绑定</title>
</head>
<body>
    <div id="app">
        <p>基本信息：{{message}}</p>
        <p>v-model: <input type="text" v-model="message"></p>
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
          el: ‘#app‘,
          data: {
               message:‘hello Vue!‘
          }
         })
    </script>
</body>
</html>

v-bind 指令

v-bind绑定HTML中的标签属性的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue"></script>
    <title>v-bind 属性标签绑定</title>
</head>
<body>
    <div id="app">
        <div v-bind:style="style">v-bind属性</div>
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:‘#app‘,
            data:{
                style:{
                    width: ‘100px‘,
                    height: ‘100px‘,
                    lineHeight: ‘100px‘,
                    textAlign: ‘center‘,
                    fontSize: ‘12px‘,
                    color: ‘green‘,
                    border: ‘1px solid green‘
                }
            }
         })
    </script>
</body>
</html>

( v-hind: )可以简写为( : )。

 

处理时间及事件绑定要灵活运用，结合Javascript相关知识。

对Vue.js的指令做简单的了解和书写，熟悉Vue基本的指令运用是开启下一步Vue学习的必由之路。

 

Vue.js 初识


联系
我们