1.初始化项目
npm init -y
2. 安装vue 2
npm install vue@^2
3.编写基本代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{name}}, 非常帅</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
name : "张三"
}
});
</script>
</body>
</html>1.基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{name}}, 非常帅,有{{num}}个人为他点赞</h1>
<input type="text" v-model = "num">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
let vm = new Vue({
el: "#app",
data: {
name : "张三",
num: 15
}
});
//2.双向绑定 模型变换，试图变化
</script>
</body>
</html>事件处理
v-xx 指令
2. v-text /v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
</script>
</head>
<body>
<div id="root" >
{{msg}}
<span v-html="msg"></span>
<span v-text="msg"></span>
</div>
<script>
const app = new Vue({
el: '#root',
data: {
msg :"<h1>Hello</h1>"
},
methods:{
}
});
</script>
</body>
</html>3.v-bind 绑定属性用的
给html标签的属性绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
</script>
</head>
<body>
<div id="root">
<a v-bind:href="link">gogogo</a>
<span v-bind:class="{active:isActive,'text-danger':hasError}">你好</span>
</div>
<script>
const app = new Vue({
el: '#root',
data: {
link:"http://www.baidu.com",
isActive:true,
hasError:true
},
methods:{
}
});
</script>
</body>
</html>
4.v-model 双向绑定
默认会
5.v-on
6. v-for
7.v-if
8.v-show
区别就是， if是不渲染dom树 而 show 是只是修改了diplay样式改成 none隐藏了而已实际还在dom树里
9.计算属性 和 watch 侦听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
</script>
</head>
<body>
<div id="root">
<!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 -->
<ul>
<li>西游记; 价格:{{xyjPrice}} ,数量：<input type="number" v-model="xyjNum"></li>
<li>水浒传; 价格:{{shzPrice}} ,数量：<input type="number" v-model="shzNum"></li>
<li>总价格:{{totalPrice}}</li>
<span v-show="s">{{msg}}</span>
</ul>
</div>
<script>
// watch 可以让我们监控一个值的变化。从而做出相应的反应
const app = new Vue({
el: '#root',
data: {
xyjPrice: 99.98,
shzPrice: 98.12,
xyjNum: 0,
shzNum: 0,
msg:"",
s:false
},
methods: {
},
computed: {
totalPrice() {
console.log("执行了计算属性");
return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum
}
},
watch:{
xyjNum(newVal,oldVal){
console.log(`newVal : ${newVal} ; oldVal : ${oldVal}`);
if(newVal>3){
this.s =true
this.msg = "输入的商品数量不能超过3";
}else{
this.s =false
}
}
}
});
</script>
</body>
</html>10. 过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
</script>
</head>
<body>
<div id="root">
<ul>
<li v-for="user in userList">
{{user.id}} ==> {{user.name}} ==> {{user.gender==1?"男":"女"}}
==> {{user.gender | genderFilter}}
==> {{genderF(user.gender)}}
==> {{user.gender | genFilter}}
</li>
</ul>
</div>
<script>
Vue.filter("genFilter", function(val){
return val==1?"男~~~":"女~~~"
})
const app = new Vue({
el: '#root',
data: {
userList: [
{ id: 1, name: 'jacky', gender: 1 },
{ id: 2, name: 'peter', gender: 0 },
]
},
methods: {
genderF(g){
return g==1?"男":"女"
}
},
filters:{
//filters 定义局部过滤器，只可以在当前vue实例中使用
genderFilter(val){
return val==1?"男":"女"
}
}
});
</script>
</body>
</html>
