Vue.js从零开始

最新推荐文章于 2023-07-23 19:12:30 发布

kevinwangwangtoup

最新推荐文章于 2023-07-23 19:12:30 发布

阅读量411

点赞数

分类专栏：框架文章标签： vue-js

本文链接：https://blog.csdn.net/github_36636723/article/details/61654858

版权

框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用Vue的过程就是定义MVVM各个组成部分的过程的过程。 1. 定义View 2. 定义Model 3. 创建一个Vue实例或”ViewModel”，它用于连接View和Model

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--这是我们的View-->
        <div id="app">
            {{ message }}
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // 这是我们的Model
        var exampleData = {
            message: 'Hello World!'
        }

        // 创建一个 Vue 实例或 "ViewModel"
        // 它连接 View 与 Model
        new Vue({
            el: '#app',
            data: exampleData
        })
    </script>
</html>

创建Vue实例时，需要传入一个选项对象。（包括数据，挂载元素，方法，模生命周期钩子等) 在实例中，选项对象的el属性指向view；data属性指向Model。 ## 双向绑定示例 ## v-model 在表单元素上实现双向数据绑定

<!-- view 层>
<div id="app">
    <p>{{message}}</p>
    <input type="text" v-model={{message}}></input>
</div>

## vue.js的常用指令 ## vue.js指令以v- 开头，作用于HTML元素，将指令绑定在HTML元素上时，会给目标元素添加一些特殊的行为—special attribute - v-if - v-show - v-else - v-for - v-bind - v-on ### v-if指令 ### 根据表达式的真假来删除和插入元素 v-if=“expression” expression 返回boolen值，Exp

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 28,
                name: 'keepfool'
            }
        })
    </script>
</html>

![这里写图片描述](http://images2015.cnblogs.com/blog/341820/201606/341820-20160627065313781-1005102718.png) 注意：v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。 ## v-show指令 ## 也是条件渲染，但元素始终会被渲染到HTML，他只是简单的为元素设置CSS的style属性(display:none)

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-show="yes">Yes!</h1>
            <h1 v-show="no">No!</h1>
            <h1 v-show="age >= 25">Age: {{ age }}</h1>
            <h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
    var vm = new Vue({
        el:'#app',
        data:{
            yes:true,
            no:false,
            age:28,
            name:'keepfool'

        }       
    })

## v-else ## 用v-else为v-if/v-show添加一个’else块’ 必须立即跟在v-if/v-show元素后面，否则不能被识别

<div id="app">
    <h1 v-if="age>=25">Age:{{age}}</h1>
    <h1 v-else>name:{{name}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            age:24;
            name:'wangkw'
        }
    })
</script>

v-else元素是否渲染在HTML中，取决于前面使用的是v-if还是v-show指令。 ## v-for指令 ## 基于一个数组渲染一个列表，和JS遍历语法相似 v-for = “item in items ” items是一个数组，item是当前被遍历的数组元素

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <style type="text/css">
    table{
        width: 400px;

        border:solid 1px gray;
    }
    thead{
        background-color:#00CC99;
        color: #fff;
    }
    tbody tr:nth-of-type(odd){
        background-color: #fff;
    }
    tbody tr:nth-of-type(even){
        background-color: #ccc;
    }
    </style>
</head>
<body>
<div id="app" >
    <table  >
        <thead>
            <tr>
                <td>Name</td>
                <td>Age</td>
                <td>Sex</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="person in people">
                <td>{{person.Name}}</td>
                <td>{{person.Age}}</td>
                <td>{{person.Sex}}</td>
            </tr>
        </tbody>
    </table>
</div>

    <script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
    <script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            people:[{
                Name:"王楷文", 
                Age : 22,
                Sex : 'male'
            },{
                Name:"郑佳琦",
                Age:28,
                Sex:'female'
            },{
                Name:"hehe",
                Age:200,
                Sex:'bannanbunv'
            }]
        }
    })
    </script>
</body>
</html>

## v-bind指令 ##
可在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性 attribute  例如:v-bind：class

{{n+1}}

<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
<script type="text/javascript">

var page = new Vue({
    el:'#app2',
    data:{
        activeNumber:1,
        pageCount:10
    }
})
</script>

## v-on指令 ##
监听DOM事件，<a v-on:click="dosomething">


有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句。

Greet

var vm = new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
},
// 在 methods 对象中定义方法
methods: {
greet: function() {
// // 方法内 this 指向 vm
alert(this.message)
},
say: function(msg) {
alert(msg)
}
}
})

“`
Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。

{{ n + 1 }}

{{ n + 1 }}

Greet

总结

new一个vue对象的时候设置属性，三个重要的分别是data，methods,watch
data 代表vue对象的数据，methods代表vue 对象的方法，watch设置了对象监听的方法
vue对象通过html指令进行关联
import指令包括：v-text渲染数据 v-if控制显示 v-on绑定事件 v-for循环渲染等

kevinwangwangtoup

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js从零开始

使用Vue的过程就是定义MVVM各个组成部分的过程的过程。定义View 定义Model 创建一个Vue实例或”ViewModel”，它用于连接View和Model<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body>
复制链接

扫一扫