在HTML中使用Vue.js
在非前后端项目中做页面时, 现在时常是只由后端人员一手开发, 在html或ftl文件中写js和 jquery总是令后端开发者如鲠在喉, 此时若能引入vue或者angular将极大提升开发效率(一般来说都会允许引入, 但博主也见过比较执拗的项目经理不允许使用前端框架非要用jq的)在html中使用vue，直接在head中引入vue.js://最好是把这个vue.min.js另存到本地,这样...
·
在非前后端项目中做页面时, 现在时常是只由后端人员一手开发, 在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访问
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)