Vue入门(上)
Vue官网：https://cn.vuejs.org/，理论里面都有，我这大多只有实操代码哈
学习一样东西一定要会看官方教程或说明文档
vue入门学习
Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。（来自百度百科）
Vue实现了AngularJS框架提出的前端程序模块化，用了MVVM设计模式，同时结合了Reactive.js的虚拟Dom技术，加上本身的特色——计算属性，成为了前端框架大哥。
1.MVVM 框架
-
M:model
数据层（存储数据及对数据的处理如增删改查）
-
V：view
视图层(UI用户界面)
-
VM： ViewModel
业务逻辑层（一切 js 可视为业务逻辑）,及时修改，及时编译，双向绑定了View层和Model层
-
v-model 双向绑定的演示
（1）引入vue.js
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>(2) html代码
<div id="app"> <input type="text" v-model="message">{{message}} </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data:{ message:'Hello Vue!' } }); </script>（3）演示view的改变，导致model层的改变
2.vue的七大属性
-
el属性
用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
-
data属性
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
-
template属性
用来设置模板，会替换页面元素，包括占位符。
-
methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中
-
render属性
创建真正的Virtual Dom
-
computed属性
用来计算
-
watch属性
watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值
3. vue的基本语法
3.1 v-if v-else-if v-else
<div id="app">
<p v-if="message==='A'">A</p>
<p v-else-if="message==='B'">B</p>
<p v-else-if="message===C">C</p>
<p v-else>Other</p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
message:'D'
}
});
</script>
3.2 v-for
<div id="app">
<ul>
<li v-for="(item,index) in list">{{index}}:{{item}}</li>
</ul>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
list:["A","B","C"]
}
});
</script>
3.2 vue绑定事件
- v-on 绑定方法
<div id="app">
<button v-on:click="saiHai">Click ME</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message:'Hello Vue!'
},
methods: {
saiHai:function (event){
// `event` 是原生 DOM 事件
alert(this.message)
}
}
})
</script>
- v-model 双向绑定
(1) 绑定表单
<div id="app-input">
性别： <input type="radio" value="男" v-model="sex">男 <input type="radio" value="女" v-model="sex">女 <br/>
你选择了：{{sex}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app-input",
data: {sex: ""}
});
</script>
<div id="app-select">
下拉框：
<select v-model="selected">
<option value="" disabled>---请选择---</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select> {{selected}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app-select",
data: {selected: "A"}
});
</script>
- v-bind 绑定数据（可以理解为单向绑定）
!--v-bind 绑定数据-->
<div id="app"><input v-bind:value=message type="text"/> {{message}}</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {message: 'hello'}
});
</script>
4. 组件化构建
4.1 组件化的概念
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。（图从Vue官网拿的）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGAYy71d-1627225503828)(https://cdn.jsdelivr.net/gh/bomingxu/picgo/image/20210623140713.png)]
4.2 构建一个简单的组件
<div id="app">
<myconponent v-for="item in items" :project="item"></myconponent>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
Vue.component("myconponent",{
props: ['project'], //!!!这里要加单引号
template: '<li>{{project}}</li>'
})
var vm = new Vue({
el: "#app",
data: {
items: ["java", "vue", "linux"],
message: 'hello'
}
});
</script>
5. axios 通讯（官网地址:http://www.axios-js.com/zh-cn/docs/）
由于vue是一个视图层框架，并且作为严格遵守SOC（关注度分离原则）所以vue.js并不包括ajax通信功能，为了解决通信问题，作者单独开发了一个名叫vue-resouce的插件，不过在进入2.0版本后停止了对该插件的维护，并推荐了Axois框架。少用jquery，因为操作dom过于频繁。
- 模拟数据 data.json
{
"name": "ethan",
"url": "www.baidu.com",
"page": 1,
"isNonProfit": true,
"address": {
"street": "含光门",
"city": "陕西西安",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://space.bilibili.com/95256449"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
- html代码
<div id="app" v-clock>
<div>{{info.name}}</div>
<div>{{info.address.city}}</div>
<a v-bind:href="info.url">click me</a></div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: function () {
return {
info: {name: null, url: null, address: {street: null, city: null, country: null}}
}
},
mounted() {
axios.get('data.json')
.then(response=>(this.info=response.data));
}
});
</script>
</body>
使用钩子函数mounted方法，在vue实例挂载的时候将json里的数据，加到示例的data函数的info属性中，利用mounted会将el替换成实例下的el的特性，把数据渲染到我们的app中
6. computed 计算属性
我们的vue对象中有一个属性，使用缓存来 将不经常变化的属性的结果缓存，下一次可以不用重复，直接从内存中调取，节省系统的资源开销
注意事项：
- methods computed不能重名，重名之后会有优先级问题，method优先级高
特性：
- 作用于缓存中，和mybatis十分相似,一旦内部有属性变化就会立刻刷新
<div id="app" v-clock> Now:{{getTime()}} Now2:{{getTime2}}</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script> var vm = new Vue({
el: "#app", data: {message: '123'},
methods: {
getTime: function () {
return Date.now();
}
},
computed: {
getTime2: function () {
this.message;
return Date.now();
}
}
});
</script>
7. 插槽
<div id="app">
<to_do>
<to_title slot="to_title" v-bind:title="title"></to_title>
<to_items slot="to_items" v-for="item in todoItems" v-bind:item="item"></to_items>
</to_do>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
Vue.component("to_do", {template: '<div>' + '<slot name="to_title"></slot>' + '<ul>' + '<slot name="to_items"></slot>' + '</ul>' + '</div>'});
Vue.component("to_title", {props: ['title'], template: '<p>{{title}}</p>'});
Vue.component("to_items", {props: ['item'], template: '<li>{{item}}</li>'});
var vm = new Vue({el: "#app", data: {title: '水果列表', todoItems: ['我是苹果', '我是香蕉']}});
</script>
