谷粒商城学习日记（20）——Vue语法入门
Posted wx61d4f5e9884c1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谷粒商城学习日记（20）——Vue语法入门相关的知识，希望对你有一定的参考价值。
Vue语法入门
可参考文档
vue官方api 计算属性和侦听器
格式
Vue对象里面声明
computed： 计算属性
watch： 侦听器
new Vue(
el: "#app",
data:
,
computed:
,
watch:
)
</script>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 -->
<ul>
<li>西游记； 价格：xyjPrice，数量：<input type="number" v-model="xyjNum"> </li>
<li>水浒传； 价格：shzPrice，数量：<input type="number" v-model="shzNum"> </li>
<li>总价：totalPrice</li>
msg
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
//watch可以让我们监控一个值的变化。从而做出相应的反应。
new Vue(
el: "#app",
data:
xyjPrice: 99.98,
shzPrice: 98.00,
xyjNum: 1,
shzNum: 1,
msg: ""
,
computed:
totalPrice()
return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum
,
watch:
xyjNum(newVal,oldVal)
if(newVal>=3)
this.msg = "库存超出限制";
this.xyjNum = 3
else
this.msg = "";
,
)
</script>
</body>
</html>
过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
可以使用局部定义的方式和全局定义的方式使用
局部使用方式
引用方式
值 | 过滤器名
</script>
let vm = new Vue(
el: "#app",
data:
,
filters:
// filters 定义局部过滤器，只可以在当前vue实例中使用
)
</script>
全局使用方式
<script>
Vue.filter("gFilter", function (val)
)
</script>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 -->
<div id="app">
<ul>
<li v-for="user in userList">
user.id ==> user.name ==> user.gender == 1?"男":"女" ==>
user.gender | genderFilter ==> user.gender | gFilter
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
Vue.filter("gFilter", function (val)
if (val == 1)
return "男~~~";
else
return "女~~~";
)
let vm = new Vue(
el: "#app",
data:
userList: [
id: 1, name: jacky, gender: 1 ,
id: 2, name: peter, gender: 0
]
,
filters:
// filters 定义局部过滤器，只可以在当前vue实例中使用
genderFilter(val)
if (val == 1)
return "男";
else
return "女";
)
</script>
</body>
</html>
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。
例如可能会有相同的头部导航。
但是如果每个页面都自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同分拆分成立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
在vue里，所有的vue实例都是组件
组件其实也是一个vue实例，因此它在定义时也会接收：data、methods、生命周期函等
不同的是组件不会与页面的元素绑定（所以不写el），否则就无法复用了，因此没有el属性。
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了
data必须是一个函数，不再是一个对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 每个对象都是独立统计的 -->
<counter></counter>
<counter></counter>
<button-counter></button-counter>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
//1、全局声明注册一个组件 // counter标签，代表button
Vue.component("counter",
template: `<button v-on:click="me()">我被点击了 count 次</button>`,
data()
return
count: 1 // 数据
,
methods:
me()
this.count ++;
);
//2、局部声明一个组件
const buttonCounter =
template: `<button v-on:click="count++">我被点击了 count 次~~~</button>`,
data()
return
count: 1
;
new Vue(
el: "#app",
data:
count: 1
,
components: // 要用的组件
button-counter: buttonCounter
)
</script>
</body>
</html>
以上是关于谷粒商城学习日记（20）——Vue语法入门的主要内容，如果未能解决你的问题，请参考以下文章