一.近来在研究自己小组的项目,没有时间去写博客,今天差不多项目基本都整合完成了,最近自己在研究vue,下面是未入门的小白总结的知识点,望对新手有一定的帮助.
二.对于vue,谈一些自己的见解,我这个人比较懒惰,不想研究比较高大上的技术,某天闲来无事,看计算机语言的开发者,无意间看到vue的开发者是一个中国人开发的,就对这门语言产生了兴趣,经过这几天的研究,发现vue与jq的语法相比,vue更为简单,它不用操作dom元素,操作方法也比jq简单很多.接下来我会尽力抽时间多多更新vue的用法,下面我用的编译器是vscode写的,这个软件插件较多,操作有些复杂,大家可以自行百度vscode的用法
三.vue基本语法:
学之前,我希望大家学习一下js,jq,html,css,这样入门vue比较容易一些,vue也和jq一样,是脚本语言
先为大家介绍一下vue大体框架(我做的一个简易的加减器):
<h1>Index</h1> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="~/js/vue.min.js"></script> <script src="~/js/axios.min.js"></script> <div id="str"> <div class="input-num"> <button v-on:click="sub"> - </button> <span>{{num}}</span> <button v-on:click="add"> + </button> </div> </div>
<script> //这里的var str=可以省略 var str = new Vue({ //el是挂载器,和jq的id选择器很相似,后面我会详细介绍 el: "#str", //data是数据源,主要存放数据 data: { num: 1 }, //这里放的是脚本代码,和jq中的函数很相似,但写法有一些区别 methods: { //add这是函数方法名,sub也是 add: function () { //这里放逻辑代码 if (this.num < 10) { this.num++; } else { alert("别点啦,最大了!"); } }, sub: function () { if (this.num > 0) { this.num--; } else { alert("别点啦,最小了!"); } } } }) </script>//
el的用法:
挂载器:让Vue实例控制页面中的某个区域的过程,称之为挂载。通过css选择器进行选择.
v-on的用法:
作用:为元素绑定事件
格式:v-on:属性名:"方法名" 举例:v-on:click:"doit"解释一下:这个控件可以使用点击事件名字为doit的函数方法.
简写:@属性名:"方法名"
v-if的用法:
作用:根据表达式的真假切换元素的显示状态
v-bind的用法:
作用:设置元素的属性
格式:v-bind:属性名="函数方法名"
简写: :属性名="函数方法名"
v-show的用法:
1.判断谋个元素是否显示或隐藏
2.为true就显示,为false就隐藏
我会及时更新的,愿我写的对你有所帮助,具体代码在下次写的时候会发出来,今天没有太多时间了,不好意思,下一篇随笔我会把我这个月做的ERP开发的项目业务逻辑和开发环境以及代码都发出来,希望对你有所帮助,每天进步一点点,愿你我都能做一个生活中的高手,加油!