Vue:
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应式的数据绑定和组合的视图组件。
官方网站:点击打开链接
引入:<script>引入
引入vue.js文件即可简单使用:
扫描二维码关注公众号,回复:
1859529 查看本文章
简单demo:
数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值.
也可以使用指令用于输出代码,例如看到的
v-html
特性被称为指令。指令带有前缀 v-
,以表示它们是 Vue 提供的特殊特性。它们会在渲染的 DOM 上应用特殊的响应式行为。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>vue起步</title>
</head>
<script type="text/javascript" src="./plugins/vue/vue.js"></script>
<body>
<div id="demo">
<h5>name:{{name}}</h5>
<h5 v-html="age"></h5>
<h5>调用方法:{{getWord()}}</h5>
</div>
</body>
<script type="text/javascript">
var data = {name: 'admin', age: '20'}; //数据对象
var vm = new Vue({ //创建一个vue实例
el: '#demo', //DOM 元素中的 id
data: data,
methods: {
getWord: function(){
return this.name + " :这是我的vue入门方法"; //可以通过 return 来返回函数值, 也可做一些业务处理
}
}
});
document.write(vm.name == data.name); //true, 他们引用的对象是一样的
document.write("<br/>");
vm.age='100'; //修改属性值也会影响到原始数据, 反之一样
document.write(data.age + "<br/>");
//Vue 实例中的属性与方法。都可以加前缀 $,以便与用户定义的属性区分开来
document.write(vm.$el == document.getElementById('demo')); //true
</script>
</html>
运行结果: