要使用Vue,顺带做个笔记，无他！
1. 理解Vue的封装对象；
2.Vue的入门使用；
Vue可以直接使用，很多人喜欢在Node.js这种javascript服务器脚本运行环境中使用（包括大部分参考资料都是这样），安装node.js还要了解npm工具等，这里避免麻烦就收直接使用（直接下载js模块，并导入就可以使用了）。
Vue模块库下载链接[ https://vuejs.org/js/vue.min.js ]
理解Vue对象
-
静态Web开发不涉及后台数据动态处理，仅仅处理前端的Web UI，前端Web UI的技术构成主要三个部分：
- HTML
- ：负责页面上的组件；
- ：HTML超文本标记语言，核心是标记（标记元素）
- CSS
- ：负责修饰页面上的组件；
- ：级联式样式表，核心是样式（Style）与过滤器（负责绑定样式与HTML组件）
- Javascript
- ：负责操作页面上的组件；
- HTML
-
Vue是Javascript语言的封装，主要的目的是方便、快捷。这种封装是软件设计思想的体现；除了Vue封装，还有其他很多封装；
- Vue不管怎么封装，主要负责的还是Web组件的操作，这种操作包含多组件的修饰属性CCS
-
三个部分的使用例子
- 没有使用CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue例子编程</title>
<!-- 1. 引入Vue的模块 -->
<script src="vue.min.js"></script>
</head>
<body>
<!-- 2. HTML组件-->
<div id="main">
<h1>数据访问 : {{data1}}</h1>
<h1>方法调用 : {{func1()}}</h1>
</div>
<!-- 3. Vue组件 -->
<script type="text/javascript">
var vm = new Vue({
el: "#main",
data: {
data1: "数据1",
data2: "数据2"
},
methods: {
func1 : function(){
return this.data2;
}
}
});
</script>
</body>
</html>
Vue编程模式
- 面向对象封装
- Vue最核心的部分：
- el：
- Vue封装的数据与数据操作绑定的HTML组件；
- data：
- 与HTML组件关联的数据；
- method：
- 与HTML组件与HTML数据关联的操作；
- props：
- 与HTML组件关联的属性；
- propsData：
- 属性相关的数据；
- el：
data的使用
data的定义
- 类型：Object | Function
- 限制：组件的定义只接受 function。
- Vue 实例的数据对象
- Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。
- 对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。
- 大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。
访问方式
- 直接访问
vm.$data.数据成员
- 代理访问
vm.数据成员
- 访问方式的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Data访问</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="main">
原始数据
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#main",
data: {
data1: "数据1",
data2: "数据2"
}
});
</script>
<script>
var main = document.getElementById("main");
// 1. 直接访问
// main.innerHTML = vm.$data.data1
// 2. 代理访问
main.innerHTML = vm.data2
</script>
</body>
</html>
template
-
template
- 类型：string
- 详细：
- 一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。
- 挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
- 如果 render 函数和 template 属性都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库。
- Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
-
使用template的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Data访问</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="main">
数据区
</div>
<script type="text/javascript">
var vm = new Vue(
{
el: "#main",
template : "<h1>Hello</h1>" // 会替换上面的div标记
}
);
</script>
</body>
</html>
render
-
render
- 类型：(createElement: () => VNode) => VNode
- 详细：
- 字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。
- 该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
- 如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。
-
render使用的例子：
- 有render优先使用render返回的组件；
- 没有render，优先使用template模板；
- 没有render与render，就使用挂载的组件来作为模板；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Data访问</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="main">
数据区
</div>
<script type="text/javascript">
var vm = new Vue(
{
el: "#main",
render: function(ce){
return ce(
"div",
{
style: {
width: '200px',
height: '200px',
background: '#FF0000',
border: '1px solid #ccc'
}
},
);
}
}
);
</script>
</body>
</html>
template模板的语法
-
template的使用Vue提供了一套专门的机制与语法，包括：
- Vue指令
- Vue特殊特性
-
这里只是入门，在后面还有更加体系的说明，下面使用两种方式说明一下；
- {{}}插值
- v-html插值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Data访问</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="main">
<button>{{data1}}</button><br>
<button v-html="data2"></button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#main",
data: {
data1: "数据1",
data2: "数据2"
}
});
</script>
</body>
</html>
模板的编译
-
实际上使用render创建组件，比较麻烦，Vue提供模板编译方式来提供更加快捷的方式。
-
complie函数
Vue.compile( template )
- 模板编译使用的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Data访问</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="main">
<button>{{data1}}</button><br>
<button v-html="data2"></button>
</div>
<script type="text/javascript">
// var temp = Vue.compile("<span>{{data1}}</span>");
var temp = Vue.compile("<span v-html='data2'></span>");
console.log(temp);
var vm = new Vue({
el: "#main",
data: {
data1: "数据1",
data2: "数据2"
},
render: temp.render
});
</script>
</body>
</html>
s
事件的使用
-
事件的使用两个部分构成：
- 使用methods定义事件函数
- 使用v-on指令绑定时间
-
事件绑定的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 事件绑定</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="main">
<button>{{data1}}</button><br>
<button v-html="data2"></button>
</div>
<script type="text/javascript">
// 绑定事件
var temp = Vue.compile("<span v-html='data2' v-on:click='func1'></span>");
// "<span v-html='data2' @click='func2'></span>"
/*
@是v-on的缩写
*/
console.log(temp);
var vm = new Vue({
el: "#main",
data: {
data1: "数据1",
data2: "数据2"
},
render: temp.render,
// 事件处理函数
methods: {
func1: function(){
alert("事件处理！");
}
},
});
</script>
</body>
</html>
- 说明：
- v-on可以缩写为@。
标记特性设置
-
使用v-bind:特性=""来设置特性；
- 最常用的特性就是样式表了。
v-bind: style
- 在这其中可以随意使用数据变量；
- 最常用的特性就是样式表了。
-
标记特性设置的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Data访问</title>
<script src="vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="main" v-bind:style="{position:'absolute', width:w, height:h, background:redcolor}">
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#main",
data: {
redcolor: "red",
w: "200px",
h: "200px"
}
});
</script>
</body>
</html>
类与样式设置
-
v-bind:class="值" -
例子代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Class过滤器设置</title>
<script src="vue.min.js"></script>
<style>
.cl{
background-color: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<!--style的样式不使用引号-->
<!--
<div id="main" v-bind:class="{cl:'true'}">
-->
<div id="main" v-bind:class="{cl:isok}">
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#main",
data: {
isok: true
}
});
</script>
</body>
</html>
网友评论