官网:https://cn.vuejs.org/v2/guide/installation.html
Vue安装
- 方式一:直接CDN引入
你可以选择引入开发环境版本还是生产环境版本
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 方式二:下载和引入
//开发环境
https://vuejs.org/js/vue.js
//生产环境
https://vuejs.org/js/vue.min.js
- 方式三:NPM安装
后续通过webpack和CLI的使用,我们使用该方式。
npm install vue
<body>
<h1 id="app">{{message}}</h1>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
//声明式编程,数据界面完全分离,响应式(随数据的变化而变化)
const app = new Vue({
el: "#app", //用于要挂在管理的元素
data: {//定义数据
message: '你好'
}
})
</script>
</body>
-
响应式
image.png
学习
- 列表
<div id="app">
<ul>
//movies: ['大话西游', '海贼王', '变形金刚', '火影忍者']
<li v-for="item in movies">{{item}}</li>
</ul>
</div>

- 计数器
<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 @click='sub'>-</button>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
counter: 0
},
//定义方法
methods: {
add: function() {
console.log('+++');
//直接用counter会报错
this.counter++;
},
sub: function() {
console.log('---');
this.counter--;
}
}
})
</script>
</body>

-
vue中的MVVM
image.png
image.png
Vue实例传入的options
- el:
类型:string | HTMLElement
作用:决定之后Vue实例会管理哪一个DOM。 - data:
类型:Object | Function (组件当中data必须是一个函数)
作用:Vue实例对应的数据对象。 - methods:
类型:{ [key: string]: Function }
作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。
Vue的生命周期


缓存组件的生命周期
两函数在不断进入和离开之间会不断执行
- activated():在进入缓存组件时会调用该方法
- deactivated():在离开缓存组件会执行
- 代码统一缩进两格进行保存
方法:
格式插件用的是JS-CSS-HTML Formatter
-
按F1输入:
image.png
- 将所有的
intent_size
都设置成2
image.png
3.重启软件
配置Vue模板
- 文件-->首选项-->用户片段,输入vue
2.配置json文件
- 添加下列代码
"Print to console": {
"prefix": "vue",
"body": [
"<script src=\"../node_modules/vue/dist/vue.js\"></script>",
"<script>",
"const app = new Vue({",
"el: '#app',",
"data: {\n",
"}",
"})",
"</script>",
],
"description": "Log output to console"
}
-
输入 vue按回车
image.png
网友评论