一个基于jquery的仿vue的简易js模板(支持ie8)

最新推荐文章于 2024-05-27 21:03:40 发布

维之

最新推荐文章于 2024-05-27 21:03:40 发布

阅读量1.2k

点赞数 1

分类专栏： javascript 文章标签： js模板引擎 html模板

本文链接：https://blog.csdn.net/xiweiller/article/details/96493843

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

现在的项目大部分都是前后端分离的模式，作为后端开发者，喜欢用一些成熟的前端框架（如：layui）方便开发，尤其在前端工程师紧缺的情况下，后端开发者可以容易入手，后来又引入了vue.js使原有的HTML数据渲染和js动态操作更加快捷。但是在一次政府项目中，要求浏览器支持到ie8，这样vue支持的不好，因此将原来的vue写法改成原始jquery写法，为了改动最小化，便写了一个简单js，用于支持模板替换、el表达式解析等功能，我将名字命名为wue.js

1. 支持的模板

v-text 标签内文本替换
v-value 标签中value值替换
v-each 标签内部节点遍历
v-src 标签中src替换
v-class 标签中class替换
v-show 节点是否显示，true：显示，false：隐藏
i-value v-each使用标签中循环子节点中使用，替换内部子节点value值
i-text v-each使用循环子节点中使用，替换内部子节点内文本值
i-each 标签内部节点遍历
i-src v-each使用循环子节点中src替换
i-class v-each使用循环子节点中class替换
i-show v-each使用循环子节点是否显示，true：显示，false：隐藏
i-click v-each使用循环子节点中使用，为内部子节点添加点击事件
e-click 标签添加点击事件

2. HTML中模板的使用

页面引入jquery.min.js和wue.js

查看文件wue.js 提取码: o7if

定义一个wue实例，js标签写在HTML中的body内最底部。

	var vm_app = new Wue({

		el:"#app",
		data:{
			title:"一个案例",
			user:{
					name:"张三",
					age:25
			},
			menu:[
					{"id":"bh1","name":"目录1"},
					{"id":"bh2","name":"目录2"},
					{"id":"bh3","name":"目录3"},
			],
		},
		methods:{
				init:function(){
					this.replaceModel();
				},
				show:function(p){
					alert(this.title+"--"+p)
				}
		}
	
	});
	vm_app.init();

参数说明：

el dom选择器，限定模板的解析范围
data 数据定义
methods 方法定义
- init 页面加载完成后的执行入口方法

页面定义模板

模板均使用在HTML标签的属性中，模板名作为属性名，值中使用双大括号作为解析对象
- v-text、v-value写法一样，例如v-text="姓名-{{user.name}}" ,双大括号中的内容，会使用wue实例中data内的值进行解析并替换，双大括号外的内容不解析。
- e-click定义在属性中，为该标签添加点击事件，事件的函数可以使用多个参数，参数之间用,分隔，可以是变量取值，也可以是其他常量，例如e-click="show(user.name)"，e-click="show('这是点击事件')"，e-click="sayUser('姓名',user.name,user.id)"。
- v-each写在循环体元素的父标签上，写法为v-each="m,item in menu"或v-each="m in menu"，字母in 前后分别为遍历的变量名、被遍历的数据集合，与in分别严格用一个空格隔开，变量名部分可以用，分隔，左侧为数据变量名，右侧为元数据对象，里面包含：索引值index，序号：num，总行数count。
  
  内部循环体元素定义时，需要添加隐藏属性style="display:none"，用于循环的参照模板，它的属性中使用i-text、i-value进行文本和value属性赋值，取值对象则为自定义的循环变量或元数据变量，例如i-text="{{item.num}}"，i-text="{{m.name}}"，如果添加点击事件则使用i-click，例如i-click="show(m.id)"，i-click="show('我是循环元素的点击事件')"，事件的函数定义方式和e-click相同。
- 双括号内表达式支持自定义的函数。函数可以定义在当前wue实例methods中，也可以定义在页面全局window域下。书写方式如：myfun(user.name)
- 双括号内表达式不允许写js逻辑，如果需要写逻辑，写在{{}}的外侧，如v-text="{{user.age}}+' 岁'"
使用wue的实例名，调用init()方法进行初始化，init方法内部为页面加载完成后要执行的逻辑，this.replaceModel()调用时执行模板解析和替换逻辑，replaceModel()方法可以携带一个参数，参数为dom选择器，如replaceModel('#table')，注意该选择器必须在el内部，表示仅解析或替换指定范围的模板。调用该方法根据逻辑需要，放于数据返回并已赋值给wue实例之后，赋值方法如this.resultdata = r.data。

3. 完整案例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>el解析案例</title>
  <!-- 引入jQuery -->  
  <script src="js/jquery.min.js"></script>
  <!-- 引入自定义的wue.js -->
  <script src="js/wue.js"></script>

</head>
<body  >
  <div id="app">
	<div>
		v-text属性：<span v-text="这是标题：{{title}}">这是标题：</span>
	</div>
	<div>
		v-value属性:<input type="text" v-value="{{user.name}}"></input>
	</div>
	<div>
		e-click属性:<button   e-click="show('点击事件')">点击按钮</button>
	</div>
	<div>
		v-each:属性
		<ul v-each="m,item in menu">
			<li style="display:none"  >
				<span i-text="{{item.num}}"></span>
				<a  href="javascript:;" i-click="show(m.id)" i-text="{{m.name}}"></a>
			</li>
		</ul>
	</div>		
  </div>
 
<script>
	var vm_app = new Wue({
		el:"#app",
		data:{
			title:"一个案例",
			user:{
					name:"张三",
					age:25
			},
			menu:[
					{"id":"bh1","name":"目录1"},
					{"id":"bh2","name":"目录2"},
					{"id":"bh3","name":"目录3"},
			],
		},
		methods:{
				init:function(){
					this.replaceModel();
				},
				show:function(p){
					alert(this.title+"--"+p)
				}
		}
	
	});
	vm_app.init();
	
</script>
</body>
</html>

页面效果：

在这里插入图片描述

维之

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
一个基于jquery的仿vue的简易js模板(支持ie8)

现在的项目大部分都是前后端分离的模式，作为后端开发者，喜欢用一些成熟的前端框架（如：layui）方便开发，尤其在前端工程师紧缺的情况下，后端开发者可以容易入手，后来又引入了vue.js使原有的HTML数据渲染和js动态操作更加快捷。但是在一次政府项目中，要求浏览器支持到ie8，这样vue支持的不好，因此将原来的vue写法改成原始jquery写法，为了改动最小化，便写了一个简单js，用于支持模板替...
复制链接

扫一扫

专栏目录