在HTML中使用Vue.js

最新推荐文章于 2023-11-03 10:14:50 发布

blog of ccy

最新推荐文章于 2023-11-03 10:14:50 发布

阅读量6k

点赞数 3

分类专栏： js、AngularJS和Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43955724/article/details/104123236

版权

js、AngularJS和Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在非前后端项目中做页面时, 现在时常是只由后端人员一手开发, 在html或ftl文件中写js和 jquery总是令后端开发者如鲠在喉, 此时若能引入vue或者angular将极大提升开发效率(一般来说都会允许引入, 但博主也见过比较执拗的项目经理不允许使用前端框架非要用jq的)

在html中使用vue，直接在head中引入vue.js:

    //最好是把这个vue.min.js另存到本地,这样写代码的时候有提示
    <head>
        <meta charset="UTF-8">
        <title>测试vue</title>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>

在html中定义一个vue控制的作用域


<body>
    <div id="vueController">
        {{msg}}
        <input type="button" value="点我" @click="changeMsg">
    </div>
</body>

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试vue</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vueController">
        {{msg}}<br>
        <!--这个输入框绑定msg的值-->
        <input type="text" v-model="msg"><br>
        <!--绑定changeMsg方法到按钮上-->
        <input type="button" value="点我" @click="changeMsg">
    </div>

<script>
    var test = new Vue({
        el: "#vueController",
        data: {
            msg: ""
        },
        methods: {
            changeMsg: function () {
                var that = this;
                that.msg = "因崔斯听";
            }
        },
        mounted: function () {
            var that = this;
            that.msg = "hello vue";
        }
    })
</script>
</body>
</html>

代码注释:
在这里插入图片描述
当我们修改msg的值时, 可以看到页面上2处绑定msg值的地方都发生了修改, 这便是前端框架双向绑定的好处, 若是使用jq, 我们要给input文本框绑定一个onchange事件, 用选择器选择页面上的msg, 着实麻烦.
另外, 还可根据需要把js代码写到js文件中去, 大量js代码写在html中看着也比较乱. 另一个前端框架angularJS入门:
https://blog.csdn.net/weixin_43955724/article/details/102651332

ps: 最后再提一嘴, vue进行ajax访问时, 官方推荐使用axios, 然而axios是基于es6编写的, 在ie中不被支持, 所以还是推荐使用vue-resource进行ajax访问

blog of ccy

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
在HTML中使用Vue.js

在非前后端项目中做页面时, 现在时常是只由后端人员一手开发, 在html或ftl文件中写js和 jquery总是令后端开发者如鲠在喉, 此时若能引入vue或者angular将极大提升开发效率(一般来说都会允许引入, 但博主也见过比较执拗的项目经理不允许使用前端框架非要用jq的)在html中使用vue，直接在head中引入vue.js: //最好是把这个vue.min.js另存到本地,这样...
复制链接

扫一扫