1、引入Vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引用 vue.js -->
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- MVVM
M - Model 数据
V - view 视图
VM - ViewModel 数据连接视图
-->
<!-- View 数据展示层 -->
<div id="d1">
<p> {{message}} </p>
<!-- {{}} - 双层大括号 是在节点中展示vue对象的信息的名字 -->
</div>
<script type="text/javascript">
// Model 数据层
let data = {
message:"hello Vue"
}
//创建 Vue对象 连接view和model
// 参数: 挂载点 - 即给视图绑定的参数数据 - 需要先创建参数对象
let p = {
// el - 即element,绑定的元素id
// data - 要展示的数据
el: "#d1",
data : data
}
let vm = new Vue(p);
</script>
<!-- vue.js 常用安装方式
1.独立版本
直接在官网下载并使用<script>标签引入,Vue会被注册为全局变量
下载时有开发版本和生产版本两个选项,开发版本包含较全的警告和debug,
生产版本比较简洁。
2.npm安装
在用vue.js构建大型应用时推荐使用npm安装 -(npm是javaScript的包管理工具 ,
也是Node.js平台默认的包管理工具,
通过npm可以安装、共享、分发代码,管理项目依赖关系。)
Node.js简单来说就是运行在服务端的javaScript,
是一个基于chrome javaScript运行时建立的一个平台
-->
</body>
</html>
2、Vue对象使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="d1">
<p> {{message}}</p>
<p> {{time}}</p>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#d1",
data : {
message:"hello vue!!!",
time : new Date()
}
});
</script>
</html>
3、双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="d1">
<h3>{{message}}</h3>
<!-- 双向绑定:通过 v-model 指令实现,主要用来在表单控件元素上,
创建双向数据绑定,根据表单上的值,自动更新绑定元素的值。-->
<input type="text" v-model = "message">
</div>
</body>
<script type="text/javascript">
new Vue({
el : "#d1",
data : {
message :"你是人间小甜瓜"
}
})
</script>
</html>
4、data数据的三种定义方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="d1">
<p>{{message}}</p>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#d1",
//方式一 data:{属性名:值}
// data: {
// message:"hahah "
// }
// 方式二 function函数
// data :function(){
// return {
// message:"heheheh"
// }
// }
// 方式三 是方式二的ES6写法
data(){
return {
message:"hhoohohoh"
}
}
})
</script>
</html>
5、Vue对象的方法methods
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="d1">
<p> 调用vue的方法 </p>
<p> {{ sayHello() }}</p>
<p> {{sayColor("ss") }}</p>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#d1" ,
data: {
message:"hahah "
},
methods :{
sayHello : function(){
//无参方法 this指向当前对象
//可以通过this指向自定义的变量,返回此变量或指定的值
return this.message;
},
sayColor : function(color){//有参方法
return color;
}
}
})
</script>
</html>
6、基础用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="d1">
<p> {{ name }}</p>
<p> {{ msg }}</p>
<p> {{like[0]}}</p>
<p> {{like[1]}}</p>
<p> {{like[like.length-1]}}</p>
<p> {{boyfrand}}</p>
<p> {{boyfrand.name}}</p>
<p> {{boyfrand.msg}}</p>
<p> {{boyfrand.like}}</p>
<!-- v-for 指令 用于遍历对象集合
参数 o —— 代表遍历的每个对象
参数 i —— 该对象的下标
in —— 指向要遍历的对象名
-->
<p v-for = "(o,i) in cars">{{i}} - {{o.name}} : {{o.color}}</p>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#d1",
data:{
name:"孙思宇",
msg:"大学",
like:["抽烟","喝酒","烫头"],
boyfrand :{
name:"老八",
msg:"小学",
like:["蹦迪","挨揍"]
},
cars:[
{name:"兰博基尼",color:"屎黄色"},
{name:"保时捷",color:"傻狗绿"},
{name:"宝马",color:"智障蓝"}
]
}
})
</script>
</html>
7、基础用法2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="d1">
<!-- 可以在vue中使用基础的运算 -->
<div> {{ 2+3 }}</div>
<div> {{ 2*3 }}</div>
<div> {{ 2/3 }}</div>
<div> {{ 2-3 }}</div>
<!-- 可以代入三目表达式 -->
<div> {{ age>18?'成年':'未成年'}}</div>
<hr />
<!-- 可以对字符串进行操作 拼接 ,调用方法 -->
<div> {{ "abc"+2+3+"cde" }}</div>
<div> {{ "123"+"123" }}</div>
<div> {{ 122+3 +"123"}}</div>
<div> {{ msg.length }}</div>
<!-- substring S不能大写 -->
<div> {{ msg.substring(2,6) }}</div>
<div> {{ }}</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#d1",
data:{
age:20,
msg:"红红火火恍恍惚惚"
}
})
</script>
</html>
8、Vue常用指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="d1" >
<div>
<!-- Vue指令是带有 v- 前缀的特殊标识
指令用于在表达式上,对值的改变,将某些属性用在DOM上-->
<p v-if="age>18">成年</p>
<p v-else >未成年</p>
<!-- if和else必须在上下一起使用
-->
<span v-text='name'></span>
<span v-html='html'></span>
<!-- v-if 和 v-show 的区别
相同点:都可以动态的控制DOM元素的显示和隐藏
不同点:v-if 的显示和隐藏效果,是将整个DOM元素添加或删除,
v-show 的显示和隐藏是为DOM元素添加css样式display,设置none或block
DOM本身还是存在的。
v-if 有更高的切换开销,v-show有更高的初始渲染开销,
如果需要频繁的切换,使用v-show 比较好,如果运行条件很少改变,
使用v-if 比较好
-->
<span v-show = "true">展示</span>
<span v-show = "false">不展示</span>
<br>
<span v-show = "name=='孙思宇'">展示吧皮卡丘</span>
<!-- shiy v-for 遍历时 (两个参数)
如果遍历的是数组 参数1是参数名,参数2是下标
如果遍历的是对象 参数1是属性值,参数2是属性名
-->
<!-- shiy v-for 遍历时 (一个参数)
如果遍历的是数组 参数1是值
如果遍历的是对象 参数1是属性值
-->
<p v-for="(v,k,i) in person">
{{i}} - {{k}} - {{v}}
<!-- i 下标 k 属性名 v 值 -->
</p>
<h3>v-bind 属性绑定(可简写)</h3>
<!-- 当属性的值是变量而不是字符串时,通过v-bind进行表示,vue自行解析处理 -->
<a v-bind:href="url">{{urlname}}</a>
<!-- 简写 -->
<a :href="url">{{urlname}}</a>
<h3>v-on 事件绑定 (可简写)</h3>
<button v-on:click = "click()">单击</button>
<!-- 简写 -->
<button @click = "click()">点击</button>
<br>
<button @dblclick = "say('芒果')">双击</button>
<div v-on:mouseover="say('来了老弟')" style="border: 1px solid palegoldenrod">鼠标移入</div>
<div v-on:mouseout="say('走了老弟')" style="border: 1px solid palegoldenrod">鼠标移出</div>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#d1",
data:{
name:"孙思宇",
age:2,
html:"<font style='color:red'></font>",
person :{
name:"李四",
age:30
},
hobbys :["篮球","唱跳","rap"],
url:"https://hao.360.com/",
urlname:"百度360" ,
},
methods:{
click:function(){
alert(1234);
},
say:function(food){
alert("喜欢"+food);
}
}
})
</script>
</html>
9、ref引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="d1">
<button @click="show()">打印日志</button>
<input type="text" id="username" value="小明" ref = "name">
<!-- Vue提供了一个操作DOM的属性ref,绑定在DOM元素上时,
用法和ID相似 ,可以通过this.$refs调用-->
<!-- $refs是所有注册过的ref的集合 ,想要获取其中的一个指定元素,
需要使用this.$refs.元素 来获取ref属性值-->
<h2 ref = "msg"> 哈哈哈哈</h2>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#d1",
methods:{
show :function(){
//通过js获取元素
// console.log(document.getElementById("username").value);
//通过vue 获取元素 需要给元素设置 ref属性 再通过 $refs
console.log(this.$refs.name.value);
console.log(this.$refs.msg.innerText);
}
}
})
</script>
</html>