-
<!DOCTYPE html>
<html>
<head>
<title>todoList</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
<input v-model="inputValue"></input>
<button @click="handleClick">提交</button>
<ul>
<li v-for="item of list">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
inputValue:"",
list:[]
},
methods:{
handleClick:function () {
this.list.push(this.inputValue);
this.inputValue = "";
}
}
})
</script>
</body>
</html>查看全部 -
v-if 与 v-show的区别
:key="item" 数值不能相同
查看全部 -
computed 计算属性
watch 监听器
查看全部 -
差值表达式(data 的属性 {{属性}})查看全部
-
挂载点el对应的div
模板是挂载点里面的内容
template 模板
查看全部 -
v-text与v-html的区别
v-on:click 简写@
methods 方法的使用
查看全部 -
模板指令 v-model:实现数据双向绑定,例如input的value写为v-model:value=“content”绑定div的内容{{content}}查看全部
-
v-bind:简写为:,表示属性绑定查看全部
-
v-model 双向绑定查看全部
-
v-on:简写是@,用于绑定事件 @click查看全部
-
v-if操作会把元素从DOM树中删除和重新添加;
v-show不会把元素删除,只会把元素的css属性display设为none
查看全部 -
安装Vue-cli 以及vue-cli的环境配置
npm install --global vue-cli
创建一个基于webpack模板的新项目
vue init webpack my-project
安装依赖
cd my-project
npm run dev
进入桌面命令
cd desktop
查看全部 -
v-html 不会转译html
v-text 转译一次html查看全部 -
Vue侦听器的作用
查看全部 -
计算属性的简单介绍
查看全部
举报