VS CODE之vue.js基本知识一
vs code 建项目布置
-
切换使用语言：
搜索框直接搜索该语言的英文，点击安装即可 -
文件目录管理：
-
设置颜色主题：
-
一些通用操作：
推荐安装的插件
Vue.js项目技术栈
Vue.js,Vue-Router,webpack,axios,Vue-cli3,Vuex,Vue组件器（Element-UI…)
技术间的联系
vue的细节分析
前端渲染（把数据和模板填到HTML标签中）：
渲染方式：
- 原生js拼接字符串
- 使用前端模板引擎
- 使用vue特有的模板语法
vue的基本使用步骤
- 需要提供标签用于填充数据
- 引入vue.js库文件
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
- 使用vue的语法做功能（创建 ，设置数据，挂载，渲染）
var vm = new Vue（{}）//参数是一个对象
var、let、const 直接区别
- var 可以重复声明
- cons不可以重复声明，不可以重新定义。值可修改，指针不能修改
- let不可以重复声明，可重新定义。值可修改，指针也可修改
- 把vue提供的数据填充到标签里
vue的4个常用选项
methods 方法
功能：在methods中，我们可以定义一些方法，供组件使用。
栗子：
定义一个数据b，当用户点击按钮的时候，b的值加1。这种情况，我们可以利用methods来实现。
//定义一个plus( )的方法在methods中，下面我们把plus( ) 绑定在按钮的点击事件上
<div id="app">{{ a }} <button v-on:click="plus">加1</button>
</div>
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
b:0
},
//方法
methods:{
plus(){
return this.b++;
}
}
});
过滤器 filter属性:
功能：将数据的小数位去掉，只保留整数部分
**使用方法：**我们先创建一个实例,数据中的格式都是带有小数点的，此时我们创建filters属性（记住此属性的值是一个对象，所以":“之后要带上大括号“{}”，在filters里面我们写一个转换函数，这个函数的功能就是将传参转换为整数后返回，此处用的是es6的语法），写好函数后我们在div里面，将参数用管道符号”|"传给toInt函数，这样就可以了！
栗子：
<div id="app6">
数字1：{{num1 | toInt}}
数字2：{{num2 | toInt}}
数字3：{{num3 | toInt}}
</div>
let app6 = new Vue({
el:'#app6',
data:{
num1:123.4,
num2:520.1314,
num3:1314.520
},
filters:{
toInt(value){
return parseInt(value);
}
}
});
计算属性computed：
功能：对数据进行计算并获取
栗子：求num1,num2,num3总和
（sum的值是依赖data中的数据num1，num2，num3的，一旦它们发生了变化，sum的值也会自动更新）
let app6 = new Vue({
el:'#app6',
data:{
num1:123.4,
num2:520.1314,
num3:1314.520
},
filters:{
toInt(value){
return parseInt(value);
}
},
computed:{
sum(){
return parseInt(this.num1+this.num2+this.num3);
}
}
});
此外计算属性拥有getter和setter两个属性。
（那么每次运行fullname的时候，就是使用getter，返回一个值，而每次执行fullname = ""的时候，就会执行set里面的函数，将firstname和lastname都进行改变。）
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
watch 观察
功能：Vue提供的用于检测指定的数据发生改变的api，也就是说，当这个数据发生变化的时候会触发对应的函数。
上面点击按钮b的值加1的例子，不就是数据发生变化了吗？我们就用watch选项来监听数字b是否发生了变化，如果了监听到了变化，我们就在控制台输入以下b的最新值。
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
a:0
},
//方法
methods:{
plus(){
return this.a++;
}
},
//观察
watch:{
a(){
console.log(`有变化了，最新值：`);
console.log(this.a);
}
}
});
**ps:**以上部分内容来自H马前端v6.5