Vue基本语法1

一.近来在研究自己小组的项目,没有时间去写博客,今天差不多项目基本都整合完成了,最近自己在研究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开发的项目业务逻辑和开发环境以及代码都发出来,希望对你有所帮助,每天进步一点点,愿你我都能做一个生活中的高手,加油!