当前位置： 正文

Vue.js让页面变成动态页面的魔法源

02-16 Vue/Ts/Js/Jquery/ 3993

对于一个网页而言，只是简单的静态页面是远远不够的。本章将会编写电影网站的所有页面逻辑，使原本的静态页面网站变成能够处理用户请求和显示动态项目的网站。
本篇文章会涉及到大量的Vue.js和JavaScript语法的应用，目的就是让读者从中学会Vue.js的各种基础语句和处理器的使用。

一、条件渲染

条件渲染是重要的控制系统，执行不同的代码会有不同的显示效果，方便根据用户的选线或组别展示不同的页面，达到代码逻辑中if…else的逻辑效果。
1.1.v-if应用

<h1 v-if></h1>
</h1> <!-- v-else-if Vue.js2.1以上版本才有的功能 -->
<h1 v-else-if>
<h1 v-else></h1>

1.2.v-show应用
另一个用于根据条件展示元素的指令是v-show
跟if区别，不管条件是什么，元素总会被渲染没，而if是惰性不会，满足条件就渲染。
v-show不支持template语法。

二、列表渲染

v-for指令使用item in items形式或者(item,index) in items。另外也可以使用of 代替 in。
第三个参数为索引：(value, key, index) in object
在遍历对象时，是按Object.keys()的结果进行遍历，但是不能保证它的结果在不同的JavaScript引擎下是一致的。

v-for与v-if同时使用：
2.1.如果处于同一节点，v-for的优先级比v-if高。

key关键词使用：
理想状态下，每个节点都是存在key值得，而且这个key值是唯一的。这个特殊属性需要v-bind来绑定动态值。
key关键词是Vue.js识别节点的一个通用机制，并不与v-for特别关联，key还具有其他用途。

三、事件处理器v-on

可以用v-on指令监听DOM事件来触发一些JavaScript代码，相当于JavaScript中的onClick事件，会在按钮被触动或其他某个操作触发时执行该事件。

<button v-on:click="counter +=1 ">增加1</button>
<p>点击了{{counter}}次</p>

3.1、方法事件处理器

很多事件处理的逻辑很复杂，所以直接把JavaScript代码写在v-on指令中是不可行的。因此v-on可以接收一个定义的方法来调用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>v-on（）方法</title>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--设立一个div-->
    <div>
        <!--对于button 设计v-on监听方法-->
        <button v-on:click="greet">Greet</button>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            name:'Vue.js'
        },
        // 在`methods`对象中定义方法
        methods: {
            greet: function (event) {
                // `this`在方法里指当前Vue实例
                alert('Hello ' + this.name + '!')
                // `event`是原生DOM事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }

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

3.2、内联处理器

除了直接绑定到一个方法，也可以用内联JavaScript语句，JavaScript的基本函数和语法都是可以直接使用。

<button v-on:click="greet('hi')">Greet</button>
......
greet: function (message) {
   // `this`在方法里指当前Vue实例
   alert('Hello ' + message + '!')
   // `event`是原生DOM事件
}

有时也需要在内联语句处理器中访问原生DOM事件。可以用特殊变量$event指定内容。

<button v-on:click="greet('hi'，$event)">Greet</button>
......
greet: function (message,event) {
   // `this`在方法里指当前Vue实例
   if(event) event.preventDefault()
   alert('Hello ' + message + '!')
   // `event`是原生DOM事件
}

3.3、事件修饰符

在事件处理器程序中调用event.preventDefault()或者event.stopPropagation()方法是常见的需求。尽管可以在methonds方法中轻松实现这一点，但更好的方式是methods方法应该只处理纯粹的数据逻辑，而不处理DOM事件细节。
为了解决这个问题，Vue.js为v-on提供了以下事件修饰符，通过由点(.)表示的指令后缀来调用修饰符。

.stop
.prevent
.capture
.self
.once
示例代码如下：

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"><a/>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThis"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!--  只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<div v-on:click.self="doThis">...</div>
<!-- 单击事件将只会触发一次  -->
<a v-on:click.once="doThis"></a>

注意：使用修饰符时，顺序很重要，相应的代码会以同样的顺序产生。因此，用@click.prevent.self会阻止所有的单击，而@click.self.prevent只会阻止元素上的单击。

3.4、键值修饰符

在监听键盘事件时，我们经常监测常用的键值。Vue.js允许为v-on在检讨呢键盘事件时添加关键修饰符：

<!-- 只有在keyCode是13时调用vm.submit() -->
<input v-on:keyup.13="submit" >

记住所有的keyCode比较困难，所以Vue.js为最常用的按键提供了别名：

<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">

全部的按键别名如下：

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

可以通过全局config.keyCodes对象自定义键值修饰符别名:

//可以使用v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

3.5、修饰键

出现在Vue.js 2.10以上版本
修饰键与正常的按键不同；修饰键和keyup事件一起用时，事件引发时必须按下正常的按键。

.Ctrl
.Alt
.Shift
.meta

使用示例如下：

<!-- Alt + C  -->
<input @keyup.alt.67 = "clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

3.6、鼠标的3个按键修饰符

出现在Vue.js 2.10以上版本
鼠标的3个按键修饰符如下:

.left
.right
.middle
这些修饰符会限制处理程序监听特定的鼠标按键

四、交互的灵魂-表单

开发者可以用v-model指令在表单控件元素上创建双向数据绑定，该命令会根据控件类型自动选取正确的方法来更新元素。尽管看起来是神奇的，但v-model本质上就是语法糖，负责监听用户的输入事件以更新数据，并极端处理一些特别的例子。
注意:v-model会忽略所有表单元素的value、checked、selected特性的初始值。

4.1、文本输入

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--设立一个div-->
    <div>
        <!--相应的表单元件-->
        <input v-model="message" placeholder="编辑">
        <p>Message is：{{ message }}</p>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message:''
        },
        // 在`methods`对象中定义方法
        methods: {

        }

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

4.2、多行文本

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--设立一个div-->
    <div>
        <!--相应的表单元件-->
        <span>message is：</span>
        <p style="white-space:pre-line;">{{ message }}</p>
        <br>
        <textarea v-model="message" placeholder="多行文本"></textarea>

    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message:''
        },
        // 在`methods`对象中定义方法
        methods: {

        }

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

4.3、复选框

复选框用于逻辑值的勾选，单个勾选框代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--设立一个div-->
    <div>
        <!--相应的表单元件-->
        <input type="checkbox" id="name1" value="张三" v-model="checkedNames">
        <label for="name1">张三</label>
        <input type="checkbox" id="name2" value="李四" v-model="checkedNames">
        <label for="name2">李四</label>
        <input type="checkbox" id="name3" value="王二" v-model="checkedNames">
        <label for="name3">王二</label>
        <br>
        <span>Checked names： {{ checkedNames }}</span>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            checkedNames: []
        },
        // 在`methods`对象中定义方法
        methods: {}

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

4.4、单选按钮

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--设立一个div-->
    <div>
        <!--相应的表单元件-->
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">One</label>
            <br>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for="two">Two</label>
            <br>
            <span>选择了： {{ picked }}</span>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            picked:''
        },
        // 在`methods`对象中定义方法
        methods: {

        }

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

4.5、选择按钮

出现“请选择”，为了避免iOS不会引发change事件。代码提供disable选项是建议的做法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--设立一个div-->
    <div>
        <!--相应的表单元件-->
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected： {{ selected }}</span>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            selected:''
        },
        // 在`methods`对象中定义方法
        methods: {

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

五、值的绑定

针对单选按钮、复选框以及选择列表选项，v-model绑定的value通常是静态字符串
有时想绑定value到Vue.js实例的一个动态属性上，这时可以用v-bind进行绑定，并且这个属性的值可以不为字符串。

5.1、复选框值得绑定

<input type="checkbox" v-model="toggle" v-bind:true-value="a"
v-bind:false-value="b"

逻辑代码如下

//选中时
vm.toggle === vm.a
//没有选中时
vm.toggle === vm.b

5.2、单选按钮值的绑定

单选按钮的值绑定代码如下：

<input type="radio" v-model="pick" v-bind:value="a">

选中时：vm.pick === vm.a

5.3、选择列表的设置和值的绑定

<select v-model="selected">
   <!-- 内联对象字面量 -->
   <option v-bind:value="{number:123}">123</option>
</select

选中时：
typeof vm.selected // ‘object’
vm.selected.nnumber // 123

5.3、完整的表单实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>完整表单</title>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app" style="display: flex;justify-content: center;">
    <!--设立一个div-->
    <div>
        <h2>注册表单</h2>
        <br>
        <!--input的应用-->
        <label>用户名称</label>
        <input v-model="username" placeholder="用户名称">
        <br> <br>
        <label>密码</label>
        <input type="password" v-model="password" placeholder="输入密码">
        <br> <br>
        <label>重复输入密码</label>
        <input type="password" v-model="rePassword" placeholder="重复输入密码">
        <br> <br>
        <label>性别</label>
        <input type="radio" id="male" value="male" v-model="sex">
        <label for="male">male</label>
        <input type="radio" id="female" value="female" v-model="sex">
        <label for="female">female</label>
        <br> <br>
        <label>爱好</label>
        <input type="checkbox" id="basketball" value="篮球" v-model="hobby">
        <label for="basketball">篮球</label>
        <input type="checkbox" id="football" value="足球" v-model="hobby">
        <label for="football">足球</label>
        <input type="checkbox" id="other" value="其他" v-model="hobby">
        <label for="other">其他</label>
        <br> <br>
        <label>职业</label>
        <select v-model="work">
            <option disabled value="">请选择</option>
            <option>学生</option>
            <option>工作</option>
            <option>其他</option>
        </select>
        <br> <br>
        <label>备注</label>
        <textarea v-model="note" placeholder="备注"></textarea>
        <br> <br>
        <button v-on:click="submit">提交</button>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
//        预设其绑定的值
        data: {
            username: '',
            password: '',
            rePassword: '',
            sex: '',
            hobby: [],
            work: '',
            note: ''
        },
        // 在`methods`对象中定义方法
        methods: {
//            点击提交之后会执行的代码，
//            展示所有的用户提交资料
            submit() {
                if (this.password === this.rePassword) {
                    let con = confirm("用户名：" + this.username + ' 性别：' + this.sex + ' 爱好：' + this.hobby.join('-') + ' 职业：' + this.work + ' 备注：' + this.note); //在页面上弹出对话框
                    if (con) alert("提交成功");
                    // 在这里可以对于所有的数据进行post或者是get等方式的服务器请求
                    else alert("取消提交");

                } else {
                    alert("两次密码输入不一致！")
                }
            }
        }
    })
</script>
</body>
</html>

六、修饰符

在一些控件中使用修饰符，可对控件或操作做出一定的改变或约束。

6.1、修饰符.lazy的使用

在默认情况下，v-model在input事件中同步输入框的值与数据，但开发者可以添加一个修饰符lazy，从而转变为在change事件中同步:

<!-- 在change 而不是input事件中更新 -->
<input v-model.lazy="msg">

6.2、修饰符.number的使用

<input v-model.number="age" type="number">

6.3、修饰符.trim的使用

自动过滤用户输入的首尾空格。

<input v-model.trim="msg">

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修饰符表单</title>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app" style="display: flex;justify-content: center;">
    <!--设立一个div-->
    <div>
        <h2>修饰符表单</h2>
        <br>
        <!--修饰符的应用.lazy-->
        <label>lazy修饰符</label>
        <input v-model.lazy="input1" placeholder="lazy修饰符">
        <br> <br>
        <!--修饰符的应用.number-->
        <label>number修饰符</label>
        <input v-model.number="input2" placeholder="number修饰符">
        <br> <br>
        <!--修饰符的应用.trim-->
        <label>trim修饰符</label>
        <input v-model.trim="input3" placeholder="trim修饰符">
        <br> <br>
        <!--修饰符的应用.lazy-->
        <label>lazy修饰符</label>
        {{this.input1}}
        <br> <br>
        <!--修饰符的应用.number-->
        <label>number修饰符</label>
        {{this.input2}}
        <br> <br>
        <!--修饰符的应用.trim-->
        <label>trim修饰符</label>
        {{this.input3}}
        <br> <br>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
//        预设其绑定的值
        data: {
            input1: '',
            input2: '',
            input3: '',
        },
        // 在`methods`对象中定义方法
        methods: {
//            定义方法……
        }
    })
</script>
</body>
</html>
微信公众号
手机浏览(小程序)
0
分享到：

猜你喜欢

（TS）根据身份证号码计算性别和年龄
Vue/Ts/Js/Jquery/

10-23 341
为什么Bootstrap网格不起作用，而按钮却起作用？
Vue/Ts/Js/Jquery/

03-21 719
SVG事件监听器用法示例
Vue/Ts/Js/Jquery/

03-20 752
SVG设置元素用法示例
Vue/Ts/Js/Jquery/

03-20 702
SVG重复动作用法示例
Vue/Ts/Js/Jquery/

03-20 734
SVG旋转转换用法示例
Vue/Ts/Js/Jquery/

03-20 719
没有账号？ 忘记密码？