<html>
<head>
<title>vue.js入门(一)</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{title}} <!--单向数据绑定,其实相当于字符串替换-->
</div>
<script>
var vm=new Vue({ //创建一个vue对象
el:"#app", //选择id为app的节点
data:{
title:"小雨大雨" //给title赋值为小雨大雨,即为单向数据绑定
}
});
</script>
</body>
</html>
--------------------------------------------------------------v-bind数据绑定,v-model模型,-------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js(一)</title>
</head>
<body>
<div id="myapp">
{{title}}
<input type="text" v-model="title"><!-- 原理是先修改v-model里的title,然后再修改data里的title,最后改变{{title}} -->
<a v-bind:href="url">百度</a> <!-- v-bind是操作元素的属性 -->
<a v-bind:href="url2">w3c</a>
</div>
<script>
//数据观察,及时更新,设计模式:观察者模式
//对象实例化
var vm=new Vue({
el:"myapp", //元素,即作用的范围
data:{ //数据
title:"小雨和呆瓜",
url:"http:www.baidu.com",
url2:"http:w3cSchool.com"
}
});
// vm.$el====document.getElementById("myapp");//二者等价,el前加$是规定
vm.$el.style.color="red";//可以直接操纵样式
</script>
</body>
</html>
--------------------------------------------------------------对象继承-------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js(一)</title>
</head>
<body>
<div id="myapp">
{{title}}
</div>
<script>
//对象继承
var subClass=Vue.extend({
data(){ //等于function data(){}
return {
title:"我的中国梦"
}
}
});
var vm=new subClass({ //相当于new Vue()
el:"myapp" //只能在实例里挂载,不能在上面的继承里挂载,这是规定
});
</script>
</body>
</html>
----------------------------------------------------------------------------------v-for循环数组--------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入门(一)</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="myapp">
<ul>
<li v-for="item in items"><!-- for-in循环 -->
{{items.title}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"myapp", //元素
data:{ //数据对象
items:[{title:"张三"},{title,"李四"},{title:"王五"}] //json字符串数据格式
}
});
//json字符串一般用ajax读取放在后台的json
//网站环境,php,nodeJS
//JSON模拟一个
//推荐:axios,原生ajax,jquery可用,但不推荐
</script>
</body>
</html>
----------------------------------------------------------------nodeJS和webpack自动化构建工具---------------------------------------
1.去nodeIS中文网下载安装node
2.如何确定node已经安装好,在cmd中使用 node -v检测是否出现版本号
3.在任意盘下新建文件后,可以按住shift再右击,选择在此处打开命令窗口,就可直接打开该文件夹的cmd窗口
4.npm init 初始化基本信息,创建package.json文件 ,自动化构建
5.安装webpack:在上面新建的文件夹下仍然可以按住shift再右击,选择在此处打开命令窗口,然后npm install webpack --save-dev(安装webpack并保存到生产版)
6.新建list.js,用webpack list.js build.js即将list.js打包为build.js