Vue.js是什么

Vue.js是一个渐进式javascript框架，渐进式就是由浅入深、由简单到复杂的方式去使用Vue.js。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue的核心是一个允许采用简洁的模版语法来声明式地将数据渲染进DOM的系统。Vue有响应式和双向绑定的特性。响应式就是修改data中的数据，视图的数据也会发生改变，双向绑定是针对表单元素，比如文本框中输入的数据发生改变视图的数据也会改变。

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个.html文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

学习Vue.js可以访问Vue的官方网站，上面有很多基础的教程。


Vue文件一般用于编写组件，主要有3部分组成：
1.template标签（html代码）
2.script标签（js代码）
3.style标签（css代码）

Vue的基本语法：

1、实例化：new Vue({})
　　2、el：一定是根容器元素（vue的作用域就是这个根元素内），就是写选择器
　　　  data：用于存储数据
　　      methods：定义方法（方法里this指向当前vue实例化的对象，但是获取属性和方法不需要this.data.name，直接this.name即可，获取方法也是如此）
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

Vue的基础语法：

  • v-model:主要是在表单元素的双向数据绑定中使用。比如文本框、下拉框、单选、复选、textarea等等。因为v-model是双向绑定的，所以文本框输入以后，模型也会发生改变。反之模型改变了文本框也会改变。

  • v-text：主要用于文本的渲染。和{{}}功能一样。但是{{}}在第一次页面Vue木有初始化完成时，会显示{{}}字符。故文本渲染多用v-text。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text指令</title>
</head>
<body>
    <div id ="app">
       <h2 v-text="message">赣州</h2>
       <h2 v-text="info">南昌</h2>
       <h2>{{ message +'!' }}北京</h2>
    </div>
    <!--开发环境版本，包含了有帮助的的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:" 你好，LYQ ! ",
                info: "江西理工大学应用科学学院"
            }
        })
    </script>
</body>
</html>
    wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

  • v-html ：设置元素的innerHvTML。内容中有html结构会被解析为标签。而v-text指令无论内容是什么，只会解析为文本。

    ​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text指令</title>
</head>
<body>
    <div id ="app">
       <h2 v-text="message">赣州</h2>
       <h2 v-text="info">南昌</h2>
       <h2>{{ message +'!' }}北京</h2>
    </div>
    <!--开发环境版本，包含了有帮助的的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:" 你好，LYQ ! ",
                info: "江西理工大学应用科学学院"
            }
        })
    </script>
</body>
</html>

​
    wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

  • v-show：控制显示隐藏。不用艺v-if，使用v-show的情况下，dom是存在的。v-show通过指定CSS样式给元素添加display block或者display none进行控制。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <img v-show="isShow" src="./img/monkey.gif" alt="">
        <img v-show="age>=18" src="./img/123.png" alt="">
    </div>
    <!--开发环境版本，包含了有帮助的的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                age:18
            },
            methods:{
                changeIsShow:function(){
                    this.isShow = !this.isShow;
                },
                addAge:function(){
                this.age++;
                }
            },
            
        })
    </script>
</body>
</html>
    wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

  • v-if：控制显示隐藏，根据表达式的真假切换元素的显示状态。其本质是通过操纵dom元素来切换显示状态，如果if不成立，则整个dom不进行渲染，即不存在。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if指令</title>
</head>
<body>
    <div id=“app”>
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">程序猿</p>
        <p v-show="isShow">程序媛 - v-show修饰</p>
        <h2 v-if="temperature=35">热死啦！</h2>
    </div>
    <!--开发环境版本，包含了有帮助的的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                temperature:20
            },
            methods:{
                toggleIsShow:function(){
                    this.isShow = !this.isShow;
                }
            },
        })
    </script>
</body>
</html>
    wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

    事件绑定的方法写成函数调用的形式，可以传入自定义参数；定义方法时需要定义形参的来接收传入的实参；事件的后面跟上.修饰符可以对事件进行限制；.enter可以限制出发的按键为回车

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on补充</title>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <!--开发环境版本，包含了有帮助的的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                doIt:function(p1,p2){
                    console.log("做it");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function(){
                    alert("吃了没");
                }
            },
        })
    </script>
</body>
</html>
    wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

  • filter : 过滤器。格式化数据。如后台返回金额13数字。页面显示：￥13.00元。

  • component ：组件。在做单页面过程中使用多些。把每一个网页做成多个组件然后拼接。起到组件复用。如页面头部底部和轮播等。
  • axios：功能强大的网络请求库。axios必须先导入才可以使用；使用get或post方法即可发送对应的请求；then方法中的回调函数会在请求成功或失败时触发；通过回调函数的形参可以获取响应内容，或错误信息。 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios基本使用</title>
</head>
<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
            接口1:随机笑话
            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
        */
        document.querySelector(".get").onclick = function () {
            axios.get("https://autumnfish.cn/api/joke/list?num=6")
            // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
            .then(function (response) {
                console.log(response);
              },function(err){
                  console.log(err);
              })
        }
        /*
             接口2:用户注册
             请求地址:https://autumnfish.cn/api/user/reg
             请求方法:post
             请求参数:username(用户名,字符串)
             响应内容:注册成功或失败
         */
        document.querySelector(".post").onclick = function () {
            axios.post("https://autumnfish.cn/api/user/reg",{username:"西红柿炒鸡蛋"})
            .then(function(response){
                console.log(response);
                console.log(this.skill);
            },function (err) {
                console.log(err);
              })
          }

    </script>
</body>

</html>
    wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==
# vue.js # html
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue