VS CODE之vue.js基本知识一

vs code 建项目布置

  • 切换使用语言:
    搜索框直接搜索该语言的英文,点击安装即可

  • 文件目录管理:
    VS CODE之vue.js基本知识一

  • 设置颜色主题:
    VS CODE之vue.js基本知识一

  • 一些通用操作:
    VS CODE之vue.js基本知识一

推荐安装的插件

VS CODE之vue.js基本知识一

Vue.js项目技术栈

Vue.js,Vue-Router,webpack,axios,Vue-cli3,Vuex,Vue组件器(Element-UI…)

技术间的联系

VS CODE之vue.js基本知识一
VS CODE之vue.js基本知识一

vue的细节分析

VS CODE之vue.js基本知识一
前端渲染(把数据和模板填到HTML标签中):
VS CODE之vue.js基本知识一
渲染方式:

  • 原生js拼接字符串
  • 使用前端模板引擎
  • 使用vue特有的模板语法

vue的基本使用步骤

  1. 需要提供标签用于填充数据
  2. 引入vue.js库文件
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
  1. 使用vue的语法做功能(创建 ,设置数据,挂载,渲染)
var vm = new Vue({})//参数是一个对象

var、let、const 直接区别

  • var 可以重复声明
  • cons不可以重复声明,不可以重新定义。值可修改,指针不能修改
  • let不可以重复声明,可重新定义。值可修改,指针也可修改
  1. 把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

上一篇:21-插槽


下一篇:SpringBoot学习笔记——Thymeleaf