-
watch:监听的是一个变量或者是一个常量的变化,这个变量可能是单一的变量,也可能是数组。
computed:可以监听很多个变量,这个变量一定是在vue实例里面的
查看全部 -
查询node版本:node -v
查询npm版本:npm -v
全局安装vue-cli工具:npm install -g @vue/cli
查询vue-cli版本:vue --version
进入项目目录,创建项目:vue create 项目名
启动运行项目:npm run serve
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表渲染</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="item in list">{{item}}</div>
<hr color="red">
<div v-for="item1 in userList" v-bind:class="['active', 'add', 'more', {'another':item1.age < 30}]">
{{item1.name}} -- {{item1.age}}
</div>
<hr color="red">
<div v-for="item2 in userList" v-bind:class="{'active': true}">
<div v-if="item2.age > 30">
<div v-if="item2.sex == '男'">
{{item2.name}}, 你老了,你个老男人
</div>
<div v-else-if="item2.sex == '女'">
{{item2.name}},你老了,你个老阿姨
</div>
</div>
<div v-else>
{{item2.name}},{{item2.age}}岁,好年轻
</div>
</div>
<hr color="red">
<div v-for="item3 in userList">
<div v-show="item3.age < 30" v-bind:>
{{item3.name}}-{{item3.age}}-{{item3.sex}}
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
list: [1,2,3,4,5,6,7,8,9],
userList: [{
name: "刘豆豆",
age: 23,
sex: "男"
},{
name: "小三",
age: 18,
sex: "女"
},{
name: "老王",
age: 40,
sex: "男"
},{
name: "花花",
age: 35,
sex: "女"
}],
style: {
color: 'red',
textShadow: '0 0 5px green'
}
}
})
</script>
</body>
</html>
查看全部 -
条件渲染:v-if v-else v-else-if,v-show
查看全部 -
传值变量可任意但必须前后一致
查看全部 -
xiaobai
查看全部 -
new template({ el: '#app', data: { msg: 'Hello Vue!!', count: 0, template: '<div>test template</div>', idName: 'bg1', href: 'http://www.baidu.com' }, methods: { add:function(){ this.count++ } } });
思考本章学习内容:
Vue的结构
<div id="app"></div>//在此处生效模板语法包括:
- {{msg}}以及{{count*20}}
- 属性绑定语法:v-bind:id ="idName" 以及v-bind:href="href"
- 绑定html:v-html=“template”
- 绑定事件:v-on:click="add()"其中指令可以缩写:
- v-bind:href="xx"变为:href="xx"
- v-on:click="yy()"变为@click="yy()"
查看全部 -
视频不清晰啊
查看全部 -
computed和watch的区别wathc==》异步场景
computed==》数据联动
查看全部 -
computed只监听new vue实例里变量实例外的变量不起作用
查看全部 -
computed监听着msg1 function中任何一个变量的变化,而watch只监听着msg值的变化。
查看全部 -
computed监听着msg1 function中任何一个变量的变化,而watch只监听着msg值的变化
查看全部 -
watch demo以及调试
查看全部 -
计算机属性和侦听器
查看全部 -
模板语法内容
查看全部
举报