-
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<div>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
</div>
<script>
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
查看全部 -
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<div>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
</div>
<script>
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
查看全部 -
v-if v-show v-for 指令
v-if 控制dom的存在与否 当对应的属性是false时 直接将dom标签删除
v-show 控制dom的显示与否 不会删除dom标签 只是添加了css属性进行隐藏
v-for 控制一组数据 循环展示
查看全部 -
computed：根据其他数据计算出来的新的结果，其他数据变化的时候进行计算，其他数据没有变化的时候直接读取缓存中的值
watch：侦听某一个数据或者计算属性是否变化
查看全部 -
1、
<div v-bind:title="title">属性绑定</div>
//可以缩写成：<div :title="title">属性绑定</div>
2、双向数据绑定：
<input v-model="content"/>
<div>{{content}}</div>
查看全部 -
2-3vue实例中的数据，事件和方法
data中的为数据。
<h1>{{**}}<h1> 中的{{}}叫做“插值表达式”，也可以写成<h1 v-text="**">,v-text叫做“指令”，会转译，而v-html不会转译。
标签中可以通过v-on（简写为“@”）绑定click事件：
<div v-on:clock="handleClick">{{*}}</div>。
methods中的为方法，可以在事件被触发时被调用。
查看全部 -
Vue
挂载点： el属性对应的dom元素
模版：挂载点内部的所有内容，还可以把模版放在Vue实例中定义，作为template属性值
实例：定义挂载点，把定义的数据与模版结合起来生成要展示的内容，再把这个内容放在挂载点中
vue只会对它所对应的挂载点内的内容产生作用
挂载点里的内容称为模版
模版可以通过template写在vue中，和写在挂载点下面的作用是一样的
vue实例绑定到挂载点后会自动对模版和数据内容进行处理，生成要最终展示的内容
查看全部 -
组件的封装： .vue文件 包括组件的模板（template） 逻辑（script） 样式（style）
main.js入口文件
启动项目:在项目文件夹下运行命令 npm run start
vue语法：一个组件只能有一个根元素，包裹所有的代码。
data在脚手架中是一个函数，不是对象。
data：function（）{
return{
}
}
es6简写函数：
data（）{
return{
}
}
查看全部 -
第18行是父组件传值(item)给参数content.
第27行是子组件定义接收父组件的参数。props可以是数组。
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title>todolist 删除功能</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root" >
<div>
<input v-model="inputValue">
<button @click="handlesubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
}
}
})
new Vue({
el:"#root",
data:{
inputValue:' ',
list:[]
},
methods:{
handlesubmit: function(){
this.list.push(this.inputValue)
this.inputValue=' '
},
handleDelete:function(index){
this.list.splice(index, 1)
}
}
})
</script>
</body>
</html>
查看全部 -
你手机耍的好的查看全部
-
{{number}} 这样的语法叫做 插值表达式
查看全部 -
Vue中父组件向子组件传递值是通过标签属性的形式传递的
子组件向父组件传递值是通过发布订阅模式的形式传递的，当子组件发布一个事件，父组件订阅了这个事件，这时父组件就接受到了子组件传递的数据
查看全部 -
全局安装vue cli需要执行一下node -v和npm-v确认node和npm都可以使用查看全部
-
用脚手架工具创建项目
1、npm install --global vue-cli 全局安装vue脚手架工具 vue-cli
2、vue init webpack my-project 创建一个基于webpack模版的新项目
3、cd my-project 进入到项目目录
4、npm run dev 运行项目
查看全部
举报