-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>todolist</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!-- <li v-for="(item,index) of list" :key="index">
{{item}}
</li> -->
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete">
</todo-item>
</ul>
</div>
<script>
// 组件的拆分
// 我们可以把一个较大的项目拆分成一个个小的组件，这样维护起来就比较方便了
// vue组件的定义，这里说道两种：
// 全局组件：vue提供了vue.component()来定义组件，第一个参数是组件的名字，也是我们将要写在dom里的标签，第二个参数是一个对象，里面可以定义一个模板，也是我们要显示的内容。
// 还有一种方式叫做局部组件，在外面定义一个对象，对象里面装着模板，但是这样还不可直接使用，我们需要在实例里面进行注册，配置标签名和内容。意思就是在我这个vue实例里面去使用这个组件。
// 在标签内可以像以往一样正常使用指令。
// 要想显示我们想显示的内容，我们可以进行传参，在标签里面定义属性，属性就是我们想要显示的内容然后在组件里面用props(固定)给接收过来就可以正常使用了。
/* 组件和实例的关系
每一个组件也是一个vue的实例。
在template中双引号可以在里面嵌套单引号，单引号不能嵌套单引号，会出现一些问题。
每一个项目都是由很多个组件组成的，也就是很多个vue实例组成的，因为每个组件就是vue实例，所以在组件中可以正常使用vue的一些方法，比如methods,watch等等。
每个组件都拥有自己的props、data、methods等等
注意：如果我们没有在vue根实例?下面定义模板，我们会按照挂载点寻找，并把下面的模板当作是模板。
*/
// 全局组件
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}{{index}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
}
}
})
// 局部组件
// var TodoItem = {
// template: '<li>item</li>'
// }
// 删除功能
/* 父组件和子组件通信：属性形式
父组件中通过属性向子组件传递值，子组件接受属性的内容并再子组件上进行内容显示
子组件可以绑定事件，实现子组件的删除必须删除父组件的相关数据，
子组件和父组件通信：发布订阅模式
子组件被点击需要通知父组件把数据删除，
传递一个$emit，触发一个自定义事件，传递一个值，
父组件在模板里可以监听子组件向外传递的出发的delete事件，如果父组件监听到子组件的事件，
执行delete事件 */
new Vue({
el: '#root',
// Components: {//实例中配置这个才能使用局部组件
// 'todo-item': TodoItem
// },
data: {
inputValue: '',//初始值为空
list: []
},
methods: {
handleSubmit: function () {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
查看全部 -
子给父组件靠发布订阅
父给子靠参数
查看全部 -
template下只允许1个最外层的包裹元素
cli工具中，data不再是对象，作为组件，数据应该要变为一个函数，函数的返回值为具体数据
ES6中可以从data:function()简化为data()
this.list应该指向data下的list，为什么会指向data里面的list呢？
因为vue底层帮我们做了处理，this.list就是this.$data.list的缩写，vue会自动去找，如果data里面没有，会去computed或者methods里去找
父组件循环todo-item的时候需要给每一项加一个key值，暂时可以用index来赋值
查看全部 -
父组件向子组件通信： 通过属性形式
1、父组件通过属性的形式向子组件传递参数，子组件中使用props来接收父组件传递过来的属性参数，并在自己的模板中使用
2、子组件可以绑定事件，通过事件触发向父组件传递参数
子组件向父组件通信：通过发布订阅模式
1、在子组件的方法中通过$emit向父组件抛出触发事件名称（delete）和触发事件的参数（index）
2、父组件通过监听子组件抛出的事件而触发自己的事件（inputDelete）
...
<todo-item v-for="(item,index) of list" :key="index" :value="item" :index="index" @delete="inputDelete"></todo-item>
...
<script>
Vue.component('todo-item',{
props: ['value','index'],
template: "<li @click='deleteClick'>{{value}}</li>",
methods:{
deleteClick: function(){
this.$emit("delete",this.index)
}
}
})
new Vue({
...
methods:{
...
inputDelete: function(index){
this.list.splice(index,1)
}
},
...
})
</script>查看全部 -
1、每一个组件就是一个vue实例；
2、组件=实例，实例=组件，所以组件中也可以有template、data、methods、等属性；
3、在vue实例中，若没有写template，则vue会将该实例挂载点下的所有内容都当做模板使用；
查看全部 -
1、什么是组件：页面中的某一块组成部分，可以是一个或多个标签，可以是模板中的一部分内容，等等，
使用组件时，根据组件名称以标签形式直接引用即可，如<todo-item></todo-item>;
2、全局组件：在页面中任何地方都可以用，vue中有一个方法用来定义全局组件，例：
Vue.component('组件名称'，{
props: [组件接收其他地方传递过来的参数数组]，
template: '组件模板，要展示在页面中的内容'
})
3、局部组件：必须在vue实例中声明后才能使用，且只能在该实例的挂载点下使用，例：
var 组件变量 = {
props: [组件接收其他地方传递过来的参数数组]，
template: '组件模板，要展示在页面中的内容'
}
new Vue({
el: "#root",
components:{
'组件名称' : 组件变量
},
...
})
实例：
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="inputSubmit">提交</button>
<todo-item v-for="(item,index) of list" :key="index" :value="item"></todo-item>
<li>今天要做的事{{count}}</li>
</div>
</div>
<script>
Vue.component('todo-item',{ //组件名称，可在页面以标签形式直接引用
props: ['value'], //组件接收的参数
template: "<li>{{value}}</li>" //将接收的参数在页面进行展示
})
/** var todoItem = {props: ['value'], //组件接收的参数
template: "<li>{{value}}</li>" //将接收的参数在页面进行展示} */
new Vue({
el: "#root",/** compontents:{
'todo-item' : todoItem
}, */
data: {
inputValue:'',
list: [],
count:0
},
methods:{
inputSubmit: function (){
this.list.push(this.inputValue)
this.inputValue = ''
}
},
watch:{
list: function(){
this.count ++
}
}
})
</script>查看全部 -
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="inputSubmit">提交</button>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
<li>今天要做的事{{count}}</li>
</div>
</div>
<script>
new Vue({
el: "#root",
data: {
inputValue:'',
list: [],
count:0
},
methods:{
inputSubmit: function (){
this.list.push(this.inputValue)
this.inputValue = ''
}
},
watch:{
list: function(){
this.count ++
}
}
})
</script>
</body>查看全部 -
1、v-if ：可用来控制dom的存在与否，后面的值为布尔型，为false时，dom将被移除；
2、v-show： 可用来控制dom的显示与否，当后面的值为false时，dom不会被移除，而是对dom使用了来隐藏了；
3、v-for：可用来循环展示列表中的数据，用法如下，表示循环遍历vue实例中list数组，其中item（局部变量，名称随意）表示当前遍历的元素，index表示当前元素对应数组中的下标（提高性能），:key的值要唯一，list表示对应的数组：
...
<li v-for="(item,index) of list" :key="index">{{item}}</li>
...
new Vue({
...
data:{
list: [1,2,3]...
)}
查看全部 -
1、计算属性：当某一个变量需要通过其他变量计算而来时，可将该变量定义在计算属性中，方法：
在vue实例下的computed属性中以方法的形式定义该变量；
2、使用计算属性的优点：当计算属性所依赖的其他变量未发生改变时，计算属性不会重新计算，会使用之前计算的缓存结果，这样可以提高程序运行效率；
3、侦听器：可监控某个变量的变化，从而进行进行业务逻辑处理； 在vue实例下的watch属性中以方法的形式对某个变量进行监听，处理；
例：
<div id="root">
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el: "#root",
data:{
firstName:"",
lastName:"",
count:0
},
computed:{
fullName: function(){
return this.firstName +" "+ this.lastName
}
},
watch:{
fullName: function(){
this.count++
}
}
})
</script>
查看全部 -
1、属性绑定：指令v-bind: ,如v-bind:title="msg"，就可以将title这个属性和vue实例中data下的msg这个属性进行绑定。v-bind: 可简写为： ，即v-bind：title 等同于 :title
2、双向数据绑定：指令v-model ，使用该指令可以使标签内容和data中属性进行双向绑定，即一方的数据变化，另一方也会跟着变化。
<div id="root">
<div :title="msg">Hello World</div>
<input v-model="content"/>
<div>{{msg}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
msg: "This is a world!",
content: "This is content!"
}
})
</script>
查看全部 -
1、插值表达式： {{number}} ，即把number的值插入到该位置；
2、"v-on:" : 事件绑定，可简写为@，后跟事件和方法名，如v-on:click="方法名" 等同于 @click="方法名"；
3、vue不面向dom编程，而是面向数据编程；
4、v-text输出为纯文本，浏览器不会再对其进行html标签解析；v-html会被浏览器进行html标签解析后输出。 如v-text=“msg”时，数据展示为<h1>Hello World!</h1>,
为v-html="msg"时，展示为 Hello World!
<div id="root">
<div v-text="msg"> </div>
</div>
<script>
new Vue({
el: "#root",
msg: "<h1>Hello World!</h1>"
})
</script>
查看全部 -
实例---挂载点----模板 之间的关系：
1、new vue（{ }）代表一个vue实例；
2、vue实例中el属性值对应的id的节点叫做挂载点；
3、挂载点中的内容就是模板；
用法：
1、vue实例只会去处理对应挂载点下的内容；
2、模板也可以写在vue实例下的template属性中（注：写在template属性中后，挂载点里面写的模板将不在生效）；
3、Vue会结合模版和数据生成最终要展示的内容，然后把它放在挂载点之中。
<div id="root"> //挂载点
<h1> {{msg}}</h1> //模板内容
</div>
<script>
new vue({ //vue实例
el:"#root",
template: "<h1> {{msg}} !!!!</h1>", //模板内容也可以写在这个属性里面
data:{
msg:"hello wold"
}
})
</script>
查看全部 -
1、用<script></script>方式引入vue.js时，最好放在<head></head>标签中，可以防止页面抖屏。
2、vue着重于对数据的编写，而不是dom元素。
3、vue实例通过el这个属性的值和页面中挂载点id值一致来控制dom节点
<div id="root">//挂载点
{{msg}}
</div>
<script>
new vue({ //vue实例
el:"#root",
data:{
msg:"hello wold"
}
})
</script>
查看全部 -
运行前置条件： node npm
查看全部 -
单文件组件
查看全部
举报