Vue-学习笔记-01 Vue.js 入门与MVVM
文章目录一、vue.js安装1.1 直接CDN方式引入1.2 下载1.3 NPM安装二、Hello Vue.js2.1 Hello Vue.js2.2一、vue.js安装1.1 直接CDN方式引入对于制作原型或学习,你可以这样使用最新版本:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
·
文章目录
一、vue.js安装
1.1 直接CDN方式引入
对于制作原型或学习,你可以这样使用最新版本:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
1.2 下载
开发环境 在官网的开发版本按钮上右击,选择链接另存为即可直接下载。
https://vuejs.org/js/vue.js
生成环境 下载方式同上
https://vuejs.org/js/vue.min.js
1.3 NPM安装
在项目中大多使用该方式,在学习了Vue.js的脚手架之后会使用该方式
# 最新稳定版
npm install vue
二、Hello Vue.js
2.1 Hello Vue.js
<body>
<div id="app">
<div>{{name}}</div>
</div>
</body>
<script src="../vue.js"></script>
<script>
// 编程范式(声明式编程)
// 好处数据与界面完全分离
let vm = new Vue({
el:"#app",
data:{
name:"Hello Vue.js"
}
})
</script>
效果:
2.2 展示列表
<body>
<div id="app">
{{message}}
<br>
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
</body>
<script src="../vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
message:"你好啊",
movies:['海贼王','钢铁侠','星际穿越','大话西游']
}
})
</script>
这种方法还支持响应式:
蠢方法:
<body>
<div id="app">
{{message}}
<br>
<ul>
<li>{{movies[0]}}</li>
<li>{{movies[1]}}</li>
<li>{{movies[2]}}</li>
<li>{{movies[3]}}</li>
</ul>
</div>
</body>
<script src="../vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
message:"你好啊",
movies:['海贼王','钢铁侠','星际穿越','大话西游']
}
})
</script>
效果:
三、小案例 计数器
3.1 v-on 监听事件 简写为@
<body>
<div id="app">
<h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button> -->
<button v-on:click="add">+</button>
<button v-on:click="subtraction">-</button>
</div>
<script src="../vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
counter:0
},
methods: {
add:function(){
this.counter++
},
// 减法的意思
subtraction:function(){
this.counter--
}
},
})
</script>
</body>
效果:
四、Vue中的 MVVM
MVVM(Model–View–ViewModel)是一种软件架构模式。
维基百科 MVVM
计数器的MVVM
更清晰的MVVM 计数器案例
<body>
<div id="app">
<h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button> -->
<button v-on:click="add">+</button>
<button v-on:click="subtraction">-</button>
</div>
<script src="../vue.js"></script>
<script>
const obj={
counter:0
}
let vm = new Vue({
el:"#app",
data:obj,
methods: {
add:function(){
this.counter++
},
// 减法的意思
subtraction:function(){
this.counter--
}
},
})
</script>
</body>
五、创建Vue实例传入的options
5.1 el:
类型:string | HTMLElement
作用:决定之后Vue实例会管理哪一个DOM。
5.2 data:
类型:Object | Function (组件当中data必须是一个函数)
作用:Vue实例对应的数据对象。
5.3 methods:
类型:{ [key: string]: Function }
作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。
这里区分以下什么是方法什么是函数:
一般直接写在script里边的叫做函数
<script>
function(){
...
}
</script>
写在一个类里边的我们叫做方法,因为它是和一个实例挂钩的。
六、生命周期
生命周期:从诞生到消亡的一个过程。
更多推荐
已为社区贡献19条内容
所有评论(0)