Vue前端框架

一.Vue概述

*Vue 是一套前端框架，用于免除原生JavaScript中的DOM
操作，简化书写。

*基于MVVM(Model-View-ViewModel)思想，实现数据的双
向绑定，将编程的关注点放在数据上。

*官网： https://cn.vuejs.org/

二.Vue快速入门

1. 新建 HTML 页面，引入 Vue.js文件
2. 在JS代码区域，创建Vue核心对象，进行数据绑定
3. 编写视图：

新建 HTML 页面，引入 Vue.js文件：

<script
src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue
.js"></script> 引入网络中的vue文件
<script src="js/vue.js"></script> 引入本地中的vue
文件 , 使用本地即可!!!

在JS代码区域，创建Vue核心对象：

<script>
// 创建Vue实例
new Vue({
el:"#app", //Vue应用实例接管的区域是'#app'
data:{ //用来定义数据模型
username:"zhangsan"
},
methods:{ //用来定义函数
}
});
</script>

编写视图：

<div id="app">
<h1>Hello {{username}}</h1>
</div>

el的两种写法

//$mount() 方法手动将 Vue 组件挂载到 DOM 元素上。在 Vue
//3 中，通常通过 createApp().mount() 自动挂载，少数情况
//下需要手动挂载。
<body>
<div id="app">
<h1>Hello {{username}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
// 创建Vue实例
const vm=new Vue({
//el:"#app", //Vue应用实例接管的区域
是'#app'
data:{ //用来定义数据模型
username:"zhangsan"
},
methods:{ //用来定义函数
}
});
setTimeout(function(){
vm.$mount('#app');
},3000);
</script>
</body>

data的两种写法

<body>
<div id="app">
<h1>Hello {{username}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
// 创建Vue实例
const vm=new Vue({
el:"#app", //Vue应用实例接管的区域是'#app'
// data:{ //用来定义数据模型 对象式
// username:"zhangsan"
// },
// data:function(){ //函数式
// return{
// username:"zhangsan"
// }
// },
//函数式 简写
data(){
return{
username:"zhangsan"
}
},
methods:{ //用来定义函数
}
});
</script>
</body>

三.插值语法

形式：{{ . . . }}
内容可以是：
        变量：{{message}}
        算术运算：{{10 + 20}}
        三元表达式：{{message ? '有值':'没值'}}
        函数调用：{{message.toUpperCase()}}

作用：{{}}是Vue中定义的插值表达式，在里面写数据模型，
到时候会将该模型的数据值展示在这个位置。且可以直接读取
到data中的所有属性

<body>
<div id="app">
<h1>Hello {{username}}</h1>
{{10+20}}
{{username=="zhangsan"?"真的":"假的"}}
{{username.toUpperCase()}}
{{getAge()}}
</div>
<script src="js/vue.js"></script>
<script>
// 创建Vue实例
new Vue({
el:"#app", //Vue应用实例接管的区域是'#app'
data:{ //用来定义数据模型
username:"zhangsan"
},
methods:{ //用来定义函数
getAge:function(){
return 18;
}
}
});
</script>
</body>

四.Vue指令

4.1 指令介绍

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有
不同含义。例如：v-if，v-for…
常用的指令有：

4.2 v-bind 与 v-model

v-bind:

该指令可以给标签原有属性绑定模型数据。这样模型数据发生
变化，标签属性值也随之发生变化
例如：

<a v-bind:href="url">百度一下</a>

上面的v-bind:" 可以简化写成 : ，如下:

<!--
v-bind 可以省略
-->
<a :href="url">百度一下</a>

v-model:

该指令可以给表单项标签绑定模型数据。这样就能实现双向绑
定效果。例如：

<input type="text" v-model="username">

代码实现:

<body>
<div id="app">
<a href="https://www.baidu.com">百度一下</a>
<a v-bind:href="url1">京东官网</a>
<a :href="url2">小米官网</a>
<hr/>
<input type="text" v-model="username"/>
</div>
<script src="js/vue.js"></script>
<script>
// 创建Vue实例
const vm=new Vue({
el:"#app",
data:{
url1:"https://www.jd.com",
url2:"https://www.mi.com",
username:"zhangsan"
},
methods:{
}
});
</script>
</body>

4.3 v-on:

我们在页面定义一个按钮，并给该按钮使用 v-on 指令绑定单
击事件，html代码如下

<input type="button" value="一个按钮" v-on:click="handle()">

而使用 v-on 时还可以使用简化的写法，将 v-on:替换成 @，
html代码如下

<input type="button" value="一个按钮"
@click="handle()">

上面代码绑定的 handle() 需要在 Vue 对象中的 methods 属
性中定义出来:

new Vue({
el: "#app",
methods: {
handle:function(){
alert("我被点了");
}
}
});

代码实现：

<body>
<div id="app">
<input type="button" value="点我" v-on:click="method01()"/><br/>
<input type="button" value="点我试试"@click="method02()"/><br/>
<input type="button" value="不传参数"@click="method03"/><br/>
<input type="button" value="传递参数"@click="method04(10)"/>
</div>
<script src="js/vue.js"></script>
<script>
// 创建Vue实例
const vm=new Vue({
el:"#app",
data:{
username:"zhangsan"
},
methods:{
method01:function(){
alert("点我");
},
method02:function(){
alert("点我试试");
},
method03:function(){
alert("不传参数");
},
method04:function(num){
alert(num);
},
}
});
</script>
</body>

4.4 v-if 与 v-show

v-if实例：

<body>
<div id="app">
<input type="text" v-model="money"/><br/>
当前用户的工资等级为: {{money}} , 当前用户为:
<span v-if="money>=0 && money<=10000">低收入</span>
<span v-else-if="money>10000 && money<20000">中收入</span>
<span v-else>高收入</span>
<hr/>
当前用户的工资等级为: {{money}} , 当前用户为:
<span v-show="money>=0 && money<=10000">低收入</span>
<span v-show="money>10000 && money<20000">中收入</span>
<span v-show="money>=20000">高收入</span>
</div>
<script src="js/vue.js"></script>
<script>
// 创建Vue实例
const vm=new Vue({
el:"#app",
data:{
money:10000
},
methods:{
}
});
</script>
</body>

4.5 v-for

这个指令看到名字就知道是用来遍历的，该指令使用的格式如
下：

语法：v-for = "(item,index) in items"
参数：

        items 为遍历的数组
        item 为遍历出来的元素
        index 为索引/下标，从0开始；可以省略，省略index
        语法： v-for = "item in items"

实列：

<body>
<div id="app">
<p v-for="addr in address">{{addr}}</p>
<p v-for="(addr,index) in address">{{index+1}} : {{addr}}</p>
</div>
<script src="js/vue.js"></script>
<script>
// 创建Vue实例
const vm=new Vue({
el:"#app",
data:{
address:["北京","上海","广州","深圳"]
},
methods:{
}
});
</script>
</body>