-
开发环境：
webstorm或vscode
推荐webstorm
相关配置：
背景色：深色
font：size＝16，行间距1.2
查看全部 -
记录
查看全部 -
查看全部
-
npm 6.4.1
node 8.12.0
查看全部 -
知识图查看全部 -
已经跟着敲了三遍了，最后一遍，记忆更深了。感谢老师讲的，只不过只会打这些代码，不知道用在什么地方。
查看全部 -
地址是：
npm install -g cnpm --registry=https://registry.npm.taobao.org
查看全部 -
地址是：
npm install -g cnpm --registry=https://registry.npm.taobao.org
查看全部 -
查看服务器上有的版本
nvm
node
npm
解决npm下载慢的问题
查看全部 -
语法
v-for
v-if
v-else
v-show
查看全部 -
说说啊啊啊啊啊啊啊啊啊啊1234556查看全部
-
学习vue制作移动端web
查看全部 -
<template>
<ul>
<!--@click点击选中样式-->
<!--:class选中样式,仅在current等于某个索引时且current不为空时生效-->
<li v-for="(item,index) in lists"
@click="choose(index)"
:class="{active: index == current && current !== ''}"
:key="index">
{{item}}
</li>
</ul>
<button type="button" @click="add()">添加</button>
<!--输出target-->
<ul>
<li v-for="(item,index) in target" :key="index">{{item}}</li>
</ul>
</template>
<script>
export default {
name: 'Info',
data () {
return {
current: '',
lists: [1,2,3,4,5,6,7,8,9],
target: []
}
},
methods:{
//选中时改变current的值
choose (index){
this.current = index;
console.info(index);
},
//点击添加按钮时把当前选中值加到目标数组
add(){
if(this.current === ''){ //为空时不添加
return;
}
this.target.push(this.lists[this.current]);
/*添加后清空*/
this.current = '';
}
}
}
</script>
<style scoped>
/*选中的li加背景色*/
li.active{
background:green;
}
</style>查看全部 -
课程安排
查看全部 -
vue通过使用var赋值，来进行浏览器调试
查看全部 -
定义watch之后，对app中的msg进行修改值后，可以观看到值发生了变化。
通过以上，可以发现computed他俩展示的效果一样，那么他们的区别在哪里？
通过上面发现，wathch只能监听他自己定义的变量名。computed可以监听实例里面的所有值。
在computed中return了this.arr; 重新定义了arr之后，发现值也跟着发生变化。说明computed可以监听到实例后的变量。
watch：一个变量或一个常量
computed：多个变量
查看全部 -
模板语法：
查看全部 -
Demo：
<head>: 引入样式文件、js库等
推荐网站bootcdn，引入vue的js文件
<body> script,new vue 对象
el：绑定元素
data： 关联数据，使用{{}}关联具体的数据名称
查看全部
知识图
举报