01-HelloVuejs
代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-HelloVuejs</title>
</head>
<body>
<div id="app">{{message}}</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js,就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
// let(变量)/const(常量)
// 编程范式:声明式编程
// 创建Vue对象的时候,传入了一些option:{}
// {}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,
// 很明显,这里是挂载到了id为app的元素上
// {}中包含了data属性:该属性中通常会存储一些数据
// 这些数据可以是我们直接定义出来的,比如像上面这样
// 也可能是来自网络,从服务器加载的
const app = new Vue({
el: "#app",//用于挂载管理的元素
data:{//定义数据
message:"Hello World!"
}
})
//传统js的做法(编程范式:命令式编程)
//1.创建div元素,设置id属性
//2.定义一个变量叫message
//3.message变量放在前面的div元素中显示
</script>
</body>
</html>
运行结果
02-vue列表展示
代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-vue列表展示</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="movie in movies">{{movie}}</li>
</ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js,就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
movies: ['蜘蛛侠','钢铁侠','绿巨人','蝙蝠侠']
}
})
</script>
</body>
</html>
运行结果
Console交互式响应
03-vue案例-计数器
代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-vue案例-计数器</title>
</head>
<body>
<div id="app">
<h2>当前计数:{{counter}}</h2>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js,就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
</body>
</html>
如果还需监听,打印语句,那么继续写入上述语句就会显得很复杂,所以我们不妨封装一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-vue案例-计数器</title>
</head>
<body>
<div id="app">
<h2>当前计数:{{counter}}</h2>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js,就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
add:function () {
console.log('add被执行');
// vm.counter++; 等价于下面的
this.counter++;
},
sub:function () {
console.log('sub被执行');
// vm.counter--; 等价于下面的
this.counter--;
}
}
})
</script>
</body>
</html>
MVVM
(一)模型图
(二)View层
- 视图层
- 在前端开发中,通常就是DOM层
- 主要作用是给用户展示各种信息
(三)Model层
- 数据层
- 数据可能使我们固定的死数据,更多的事来自我们服务器,从网络上请求下来的数据
- 在计数器案例中,就是后面抽取出来的obj,当然,里面的数据可能没有这么简单
(四)VueModel层
- 视图模型层
- 视图模型层是view和Model沟通的桥梁
- 一方面它实现Data Binding,也就是数据绑定,将Model的改变实时的反应到View中
另一方面它实现了DOM Listener,也就是DOM监听,当DOM发生一些事件(点击,滚动,touch等)时,可以监听到,并在需要的情况下改变对应的Data
options选项
(一)el:
- 类型:string|HTMLElement
- 作用:决定之后Vue实例会管理哪一个DOM
(二)data:
- 类型:Object | Function(组件当中data必须是一个函数)
- 作用:Vue实例对应的数据对象
(三)methods:
- 类型:{[key:string]:Function}
- 作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用
Vue的生命周期
04-vue的template
模板代码
<div id="app">
{{message}}
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js,就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
message: 'hello world!'
}
})
</script>
idea设置步骤