渐进式前端框架vue.js

1，先来个简单demo，提提神1.先定义html{{ message}}2.定义js// 这是我们的Modelvar exampleData = {message: '输出:'}// 创建一个 Vue 实例或 "Vie

阿拉斯攀登

5848人浏览 · 2017-05-22 20:29:06

阿拉斯攀登 · 2017-05-22 20:29:06 发布

1，先来个简单demo，提提神

1.先定义html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>

	</head>

	<body>
		<!--这是我们的View-->
		
		<div id="div1">
			<p>{{ message}}</p>
		</div>
		<script src="js/index.js"></script>
	</body>

</html>

2.定义js

	// 这是我们的Model
        var exampleData = {
            message: '输出:'
        }

        // 创建一个 Vue 实例或 "ViewModel"
        // 它连接 View 与 Model
        new Vue({
            el: '#div1',
            data: exampleData
        })

3.结果自己运行一下哦，会把message中定义的值绑定到div1中。

2.vue.js简介

Vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

总之，Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

3.vue.js使用

从官网上下载下来，想使用一般的js文件一样引入，也可以cdn引入,如下：

cdn地址： cdn地址

将<script src="https://cdn.bootcss.com/vue/2.3.3/vue.common.js"></script>引入。

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}$/, //不连续的两位字母// /^