概述
基于JavaScript的渐进式前段框架
基于JavaScript:本质就是封装了js代码,提供vue.js文件
渐进式:vue框架的功能很丰富,可以自己选择用哪些功能
前端框架:只是提供了一套API,指定软件的流程
特点:轻量级 + MVVM思想 + 数据驱动/双向绑定 + 组件化
步骤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue入门案例</title>
<!-- 步骤: 1.引入vue.js文件
src指定js文件的位置,原则:先找到和自己网页同级的资源
-->
<script src="vue/vue.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区:是指在指定位置展示vue提供的数据 -->
<div id="app">{
{
msg}}{
{
hh}}</div>
<!-- 3.使用vue准备数据,让第二步获取数据 -->
<script>
var a = {
msg:"99级封号斗罗",
hh:"sdf"
}
new Vue({
//el属性是挂载点,即将把数据展示在指定位置(css选择器)
el:"#app",//指定数据渲染区,id选择器,用#获取id的值
//data属性是用来准备数据
data:a
})
</script>
</body>
</html>
MVVM
M:Model 模型,数据 javascript对象 是指存数据的地方
V:View 视图 DOM 是指展示数据的地方
VM:ViewModel 通讯 观察者 练习了M和V的关系(new Vue)
好处是可以松耦合
Vue使用
vue使用步骤:导入vue.js文件,定位好view位置和model数据,通过new一个Vue对象来实现数据和视图的联系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue入门案例</title>
<!-- 步骤: 1.引入vue.js文件
src指定js文件的位置,原则:先找到和自己网页同级的资源
-->
<script src="vue/vue.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区:是指在指定位置展示vue提供的数据 -->
<div id="app">{
{
msg}}{
{
hh}}</div>
<!-- 3.使用vue准备数据,让第二步获取数据 -->
<script>
var a = {
msg:"99级封号斗罗",
hh:"sdf"
}
new Vue({
//el属性是挂载点,即将把数据展示在指定位置(css选择器)
el:"#app",//指定数据渲染区,id选择器,用#获取id的值
//data属性是用来准备数据
data:a
})
</script>
</body>
</html>
浅析Vue对象
el是挂载点,是等待被数据渲染的位置,data是这个位置可以使用的数据,另外还有methods这个位置可以使用的函数
data数据的三种方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 data里数据的三种写法</title>
<script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">{
{
msg}}</div>
<script>
new Vue({
el:"#app",
/* data数据的三种写法 */
//第一种:标准写法
// data:{
// msg:"你好我是第一种写法标准写法"
// }
//第二种:定义函数,返回对象
// data:function(){//方便的把组件间的关系实现松耦合
// return {
// msg:"你好我是第二种写法定义函数,返回对象"
// }
// }
//第三种:第二种的简写
data(){
return{
msg:"你好我是第三种写法简写的函数"
}
}
})
</script>
</body>
</html>
Vue指令
判断v-if
循环v-for
事件:v-on
绑定:v-bind
双向绑定:v-model
闪现:v-cloak
Vue组件
概述
扩展了HTML标签,好处是提高了组件代码的复用性
使用步骤:1.创建组件2.使用组件(当做HTMl标签)
1.分类:全局组件和局部组件:作用域
注册一个全局组件(所有实例都能用)语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件:
也可以注册一个局部组件(只能在这个实例中使用)
Vue的Ajax
Ajax概述
Ajax即Asynchronous Javascript And XML(异步的)
Ajax并不是一种新的编程语言,而是多种技术的综合应用
Ajax是客户端的技术,它可以实现局部刷新网页
Ajax是一种在无需重新加载整个网页的情况,能够更新部分网页的技术
Ajax原理
Ajax是一种用于创建快速动态网页的技术
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。
axios
1, Vue中封装了ajax并增强了它，在异步并发处理优于原生ajax。称为：axios（ajax input output system）
2, 使用步骤: 要使用一个单独的js文件,注意导入顺序
Vue路由
概述
说明:用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据.把互联网中网络的链路称之为路由.(网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)
接收浏览器的请求,根据不同的请求的方式,找到匹配的组件
工具类:VueRouter表示VueRouter的核心属性,用来把不同的请求匹配到不同的组件
使用步骤:
1.引入vue.js 2.引入vue-router.js
总结
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业 vue</title>
<!-- 完成vue组件需要导入vue.js -->
<script src="./vue/vue.js"></script>
<!-- 完成axios需要导入vue.js和axios.min.js -->
<script src="./vue/axios.min.js"></script>
<!-- 完成路由需要导入vue.js和vue-router.js -->
<script src="./vue/vue-router.js"></script>
</head>
<!-- 准备练习组件的数据渲染区 -->
<div id="component">
<qj></qj>
<jb></jb>
</div>
<!-- 准备练习axios的数据渲染区 -->
<div id="axios">
<button v-on:click="show()">点我展示所有斗罗</button>
<button @click="show()">点我也可以</button>
<select>
<option v-for="douluo in douluos">{
{
douluo}}</option>
</select>
</div>
<!-- 准备练习路由的数据渲染区 -->
<div id="router">
<router-link to="/lu">点我进入路由1</router-link>
<router-link to="/you">点我进入路由2</router-link>
<p>我就是来占个位,给你展示下router-view的作用</p>
<router-view></router-view>
</div>
<script>
/* 完成vue组件作业 */
/* 全局组件 */
Vue.component("qj",{
template:"<h1>我是全局组件</h1>"
})
new Vue({
el:"#component",
/* 局部组件 */
components:{
jb:{
template:"<h1>我是局部组件</h1>"
}
}
})
/* 完成vueaxios作业 */
new Vue({
el:"#axios",
data(){
return {
douluos:["请选择你的斗罗"]
}
},
methods:{
show(){
axios
.get("vueaxios作业.json")
.then(
a => {
this.douluos = a.data.douluos
}
)
.catch(function (error){
console.log(error)
})
}
}
})
/* 完成vue路由作业 */
let template1 = {
template : "<h1>我是用来完成vue路由作业的第一个组件</h1>"
}
let template2 = {
template : "<h1>我是用来完成vue路由作业的第二个组件</h1>"
}
let router = new VueRouter({
routes:[
{
path:"/lu",component:template1},
{
path:"/you",component:template2}
]
})
new Vue({
el:"#router",
router:router
})
</script>
<body>
</body>
</html>