当前位置：首页 > news >正文

001 vue

news 来源：原创 2025/8/27 15:29:26

https://cn.vuejs.org/

文章目录

- v-bind
- v-model
- v-on
- 修饰符
- 条件渲染/控制：v-if v-show
- 列表渲染

M：即Model，模型，包括数据和一些基本操作
V：即View，视图，页面渲染结果
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）
在MVVM前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，还需要通过DOM获取View中的数据，然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不再关心Model和View之间是如何互相影响的
只要Model发生了改变，View上自然会表现出来
当用户修改了View，Model中的数据也会跟着改变。。。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue快速入门</title>
</head>
<body><div id="app"><!--1.{{message}}：插值表达式2. message 就是从model的data数据池来设置3. 代码执行时，会到data{}数据池中去匹配数据，如果匹配上，就进行替换，如果没有匹配上，就输出空--><h1>欢迎你{{message}}--{{name}}</h1></div><!--引入vue.js--><script src="vue.js"></script><script>//创建Vue对象/*** 1.创建Vue对象实例**/let vm = new Vue({el: "#app", //创建的vue实例挂载到 id=app的divdata: { //data{} 表示数据池(model有了数据)，以k-v形式设置（根据需要设置）message: "Hello-Vue",name: "xd"}})console.log(vm._data.message);console.log(vm._data.name);console.log(vm.message);console.log(vm.name);</script></body>
</html>

注意代码顺序，要求div在前，script在后，否则无法绑定数据
Vue.js采用简洁的模板语法来声明式地将数据渲染进DOM的系统，做到数据和显示分离
Vue没有繁琐的DOM操作，如果使用jQuery，我们需要先找到div节点，获取到DOM对象，然后进行节点操作，显然Vue更加简洁

v-bind

v-bind指令可以完成基本数据渲染/绑定
v-bind简写形式就是一个冒号（:）
插值表达式是用在标签体的
如果给标签属性绑定值，则使用v-bind指令

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>单向数据渲染</title>
</head>
<body><div id="app"><h1>{{message}}</h1><!--1.使用插值表达式引用data数据池数据是在标签体内2.如果在标签/元素的属性上引用data数据池数据时，不能使用插值表达式，需要使用v-bind--><img v-bind:src="img_src" v-bind:width="img_width"><img v-bind:src="img_src" v-bind:width="img_width">
</div><script src="vue.js"></script>
<script>let vm = new Vue({el: "#app", //创建的vue实例挂载到 id=app的divdata: { //data{} 表示数据池(model有了数据)，以k-v形式设置（根据需要设置）message: "hello",img_src: "1.png",img_width: "200px"}})</script>
</body>
</html>

v-model

v-model可以完成双向数据绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>双向数据渲染</title>
</head>
<body>
<div id="app"><h1>{{message}}</h1><!--1.v-bind是数据单向渲染：data数据池绑定的数据变化，会影响view2.v-model="hobby.val" 是数据的双向渲染，(1)data数据池绑定的数据变化，会影响view(2)view关联的元素值变化，会影响data数据池的数据--><input type="text" v-model="hobby.val"><br /><input type="text" v-bind:value="hobby.val"><br /><p>你输入的爱好是：{{hobby.val}}</p>
</div><script src="vue.js"></script>
<script>let vm = new Vue({el: "#app", //创建的vue实例挂载到 id=app的divdata: { //data{} 表示数据池(model有了数据)，以k-v形式设置（根据需要设置）message: "hi，输入你的爱好",hobby: {val: "购物"}}})</script>
</body>
</html>

v-on

使用v-on进行事件处理，比如：v-on:click表示处理鼠标点击事件
事件调用的方法定义在vue对象声明的methods节点中
v-on：事件名可以绑定指定事件
如果方法没有参数，可以省略()[需要浏览器支持]
v-on指定的简写形式 @[需要浏览器支持]
查看可以绑定的事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>事件处理</title>
</head>
<body>
<!--视图-->
<div id="app"><h1>{{message}}</h1><!--1.v-on:click 表示给button元素绑定一个click的事件2.sayHi()表示绑定的方法，在方法池methods{}定义的--><button onclick="sayHi()">点击输出</button><button v-on:click="sayOk()">点击输出</button><button>点击输出</button><button>点击输出</button>
</div>
<!--引入vue.js-->
<script src="vue.js"></script>
<!--创建一个vue实例，并挂载到id=app的div-->
<script>let vm = new Vue({el: "#app", //创建的vue实例挂载到 id=app的divdata: { //data{} 表示数据池(model有了数据)，以k-v形式设置（根据需要设置）message: "Vue事件处理的案例",name: "xd"},//是一个methods属性，对应的值是对象//在{}中，可以写很多的方法methods: {sayHi() {console.log("hi,1");},sayOk() {console.log("ok,2");}}})
</script>
</body>
</html>

修饰符

修饰符（Modifiers）是以（.）指明的后缀，指出某个指令以特殊方式绑定。
在事件处理程序中调用event,preventDefault()或event.stopPropagation()。
Vue.js为v-on提供了事件修饰符。
.stop
.prevent
.capture
.self
.once
.passive

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Vue修饰符使用</title>
</head>
<body>
<div id="app"><!--1. 修饰符用于指出一个指令应该以特殊方式绑定。2. v-on:submit.prevent的.prevent 修饰符表示阻止表单提交的默认行为3. 执行 程序员指定的方法--><form action="http://www.baidu.com" v-on:submit.prevent="onMySubmit">妖怪名: <input type="text" v-model="monster.name"><br/><br/><button type="submit">注册</button></form><p>服务返回的数据是{{count}}</p><h1>修饰符扩展案例</h1><button v-on:click.once="onMySubmit">点击一次</button><br/><input type="text" v-on:keyup.enter="onMySubmit"><input type="text" v-on:keyup.down="onMySubmit"><input type="text" v-model.trim="count">
</div>
<script src="vue.js"></script>
<script>let vm = new Vue({el: '#app',data: {//数据池monster: {//monster数据(对象)的属性, 可以动态生成},count: 0},methods: {//方法池onMySubmit() {//console.log("我们自己的表单提交处理...");//"", null, undefined都是falseif(this.monster.name) {console.log("提交表单 name=", this.monster.name);//这里，程序员就可以根据自己的业务发出ajax请求到后端//得到数据后，在进行数据更新this.count = 666;} else {this.count = 0;console.log("请输入名字..");}}}})
</script>
</body>
</html>

条件渲染/控制：v-if v-show

Vue提供了v-if和v-show条件指令完成条件渲染/控制
v-if会确保在切换过程中，条件块内的事件监听器和子组件销毁和重建
v-show机制相对简单，不管初始条件是什么，元素总是会被渲染，并且只是对CSS进行切换
使用建议：如果要频繁地切换，建议使用v-show；如果运行时条件很少改变，使用v-if较好

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>条件渲染 v-if</title>
</head>
<body>
<div id="app"><!--这里还可以看到checkbox的 checked属性的值--><input type="checkbox" v-model="sel">是否同意条款[v-if实现]<!--v-if/v-else 会根据 返回的值,来决定是否动态创建对应的子组件 <h1>--><h1 v-if="sel">你同意条款</h1><h1 v-else>你不同意条款</h1>
</div>
<script src="vue.js"></script>
<script>//为了调试方便, 使用vm接收Vue实例let vm = new Vue({el: '#app',data: {//data数据池sel: false}})
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>条件渲染 v-show</title>
</head>
<body>
<div id="app"><!--这里还可以看到checkbox的 checked属性的值--><input type="checkbox" v-model="sel">是否同意条款[v-show实现]<h1 v-show="sel">你同意条款</h1><h1 v-show="!sel">你不同意条款</h1>
</div>
<script src="vue.js"></script>
<script>//为了调试方便, 使用vm接收Vue实例let vm = new Vue({el: '#app',data: {//data数据池sel: false}})
</script>
</body>
</html>

列表渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-for 列表渲染</title>
</head>
<body>
<div id="app"><!--基本语法:<li v-for="变量 in 数字">{{ 变量 }}</li>--><h1>简单的列表渲染</h1><ul><li v-for="i in 3">{{i}}</li></ul><!--基本语法:<li v-for="(变量, 索引) in 值">{{ 变量 }} - {{ 索引 }}</li>--><h1>简单的列表渲染-带索引</h1><ul><li v-for="(i,index) in 3">{{i}}-{{index}}</li></ul><h1>遍历数据列表</h1><!-- 语法:<tr v-for="对象 in 对象数组"><td>{{对象的属性}}</td></tr>--><table width="400px" border="1px"><tr v-for="(monster,index) in monsters"><td>{{index}}</td><td>{{monster.id}}</td><td>{{monster.name}}</td><td>{{monster.age}}</td></tr></table>
</div>
<script src="vue.js"></script>
<script>new Vue({el: '#app',data: { //数据池monsters: [{id: 1, name: '牛魔王', age: 800},{id: 2, name: '黑山老妖', age: 900},{id: 3, name: '红孩儿', age: 200}]}})
</script>
</body>
</html>