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

Vue框架

news 2024/10/22 9:46:24

Vue.js（通常简称为Vue）是一个用于构建用户界面的开源JavaScript框架，可以免除原生JavaScript中的DOM操作，简化书写。其基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

引入Vue

1、首先需要在html页面引入Vue.js文件，相当于java引入包，但Vue.js需自行下载

    <script src="js/vue.js"></script>

2、然后在js代码区域，创建Vue核心对象，定义数据模型

  <script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!'},methods:{}});</script>

el: '#app'：指定Vue实例挂载到哪个DOM元素上。
data：包含Vue实例需要的数据。
methods：包含Vue实例需要的方法。

3、编写视图

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

v-model="message"：这是Vue.js提供的指令，用于创建双向数据绑定。它将输入框的值与Vue实例中的message数据属性绑定起来。这意味着当你在输入框中键入内容时，message的值会实时更新。当message的值在其他地方被更新时，输入框中显示的内容也会相应更新。

{{表达式}}：为插值表达式，内容可以是变量、三元运算符、函数调用、算术运算

可通过改变输入框内的内容来改变message的内容

//改变后

常用指令

HTML标签中带有v-前缀的特殊属性，不同指令具有不同含义

v-bind:为HTML标签绑定属性值，如设置href，css等。v-bind可省略，只写"："。
v-model:为表单元素创建双向数据绑定。一旦绑定了数据变量，那必须定义该数据变量。
v-on:为HTML标签绑定监听DOM事件。v-on:click可简写为@click，和v-model一样，一旦绑定了方法，就必须vue对象内部定义该方法。
v-if、v-else-if、v-else: 根据表达式的真假来条件性地渲染元素。
v-show:根据表达式的真假切换元素的 display CSS 属性。不成立也会渲染元素，但不展示
v-for:基于源数据多次渲染元素或模板块。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AAA专业苏打饼干打孔</title><script src="js/vue.js"></script>
</head><body><div id="app"><!--v-bind:--><a :href="url" target="_blank" :title="url">超链接</a><br><br><!-- 等同于<a v-bind:href="url" target="_blank" :title="url">超链接</a> --><input type="text" v-model="url"><br><br><!--v-on:--><input type="button" value="点击我" @click="buttonClicked"><br><br><!-- 等同于<input type="button" value="点击我" v-on:click="buttonClicked"> --><!-- v-if、v-else-if、v-else  --><input type="text" v-model="age"><span v-if="age<0">输入错误</span><span v-else-if="age>=0&& age<18">未成年人</span><span v-else>老年人</span><br><br><span v-show="age<0">输入错误</span><span v-show="age>=0&& age<18">未成年人</span><span v-show="age>=18">老年人</span><!-- v-for格式：v-for="取出元素名 in 数组名" 或者v-for="(取出元素名,角标) in 数组名"--><div v-for="t in team">{{t}}</div><hr><div v-for="(t, i) in team">{{"第"+i+"个队伍"}}:{{ t }}</div></div><script>var app = new Vue({el: '#app',data: {team: ["tes", "t1", "gen.g", "hle", "blg"],age: 0,url: "https://www.bilibili.com" // 这里定义了 url 数据属性},methods: {buttonClicked: function () {alert("被点击了");}}});</script>
</body>
</html>

v-if和v-show的区别：v-if只渲染符合要求的span，v-show全部渲染，但不符合要求的不展示

练习

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AAA专业苏打饼干打孔</title><script src="js/vue.js"></script>
</head><body><div id="app"><table border="1" cellspacing="0" width=60%><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>分数</th><th>等级</th></tr><tbody ><tr align="center" v-for="(person, index) in students" :key="index"><td>{{ index+1}}</td><td>{{ person.name }}</td><td>{{ person.age }}</td><td v-if="person.gender=1">{{ "男" }}</td><td v-else-if="person.gender=2">{{ "女" }}</td><td>{{ person.score }}</td><td v-if="person.score<60">{{ "不及格" }}</td><td v-else-if="person.score>=60">{{ "及格" }}</td></tr></tbody></table></div><script>new Vue({el: '#app',data: {students: [{ name: '张三', age: 25, gender: 1, score: 88 },{ name: '李四', age: 23, gender: 2, score: 92 },{ name: '王五', age: 27, gender: 1, score: 75 },{ name: '赵六', age: 22, gender: 2, score: 95 }]}});</script>
</body></html>