知识点:
- 数据分离,用变量显示,也可以用v-text属性
- 如果是其他属性要显示数据的话可以用v-bind方法
- 在input里可以用v-model的方法来绑定value.
- 用v-for进行对数组的遍历显示
- 用@click属性添加点击事件,方法可以直接写在里面
- v-if可以做为条件直接写在属性里面,条件可以是值,也可以写变量
- v-else没有值,直接写在属性里面
- 在数组里可以写些Json数据
- 在computed这个方法集里,可以把需要换算的公式写进去,把方法名直接写在双引号里就可以动态返回结果。
- methods里面可以直接写方法,方法的变量可以是computed里面的方法名,直接引用在双括号里。
- 创建组件,组件由一个名称和对象组成,对象里面有template,这个是要渲染在组件里的。组件里面有属性props,是一个数组,这个对应这个组件里创建的属性名称。当对这个属性传值之后,就可以在模板里进行相应的传值了。
- 每个模板都要有一个跟元素,否则在遍历两个或以上的数据的时候就不会显示了。
- 组件里的data可以是一个方法,这里可以直接写数据返回。
- 组件里的数据如果是重复的,那么就要有一个key,否则会报小错误。所以一般要带个唯一性的ID。写的时候例如::key="item.ID", 写在组件的属性里。
- 从子组件到父组件传递自定义事件
- 在vue里用axios来请求
- vue cli用法
- class和CSS绑定
- vue router
那我们从第一个知识点开始我们的教程吧。
创建环境,我们可以用引入CDN的方法,也可以用nodejs的NPM来做一个比较复杂点的环境,出于理解的方便,这里就直接引入了cdn的方法。然后做一个网页引入进去就可以了。
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
1. 数据分离,用变量显示,也可以用v-text属性
引入之后我们需要创建一个vue实例才能让vue发挥作用。
我们要创建一个vue的作用域,也就是一个div然后做一个id。例如:
<div id="app"></div>
然后开始我们的实例:
new vue({
el:"#app"
data:{
title:"this is title"
}
});
放到这里我们就可以显示了。
<div id="app"><h1>{{title}}</h1></div>
当然我们可以用另外一个方法显示。
<div id="app"><h1 v-text="title"></h1></div>
v-开头的directive还有很多。
这两种方法其实没有上面区别。
2. 如果是其他属性要显示数据的话可以用v-bind方法
在vue里很多数据都是隔开的,包括属性的数据,这样我们可以动态的控制属性值。例如:
<div id="app"><h1 title="this is title attribute" v-text="title"></h1></div>
如果我们要把这个title属性的值放到vue里面的话,如何操作呢?
我们可以用v-bind这个指令:
<div id="app"><h1 v-bind:title="title" v-text="title"></h1></div>
当然我们可以直接把v-bind这个拿掉,也可以是同样的效果。
<div id="app"><h1 :title="title" v-text="title"></h1></div>
3. 在input里可以用v-model的方法来绑定value
通常用v-model指令来绑定input和外部的内容。
<div id="app">
<div v-text="title"></div>
<input type="text" v-model="title">
</div>
<script>
new Vue({
el:"#app",
data:{
title:"this is the title"
}
})
</script>
这样即使我们改变input值,上面的内容也会跟着变。
4.用v-for进行对数组的遍历显示
v-for可以遍历数组,我们直接来看一个例子。
<div id="app">
<div class="titles">
<ul v-for="title in titles">
<li>
{{title}}
</li>
</ul>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
titles:['title1','title2','title3']
}
});
</script>
5. 用@click属性添加点击事件,方法可以直接写在里面
我们可以用上面的例子直接写一个todo list的APP
<div id="app">
<div class="titles">
<ul v-for="title in titles">
<li>
{{title}}
</li>
</ul>
<input v-model="title">
<input type="button" @click="titles.push(title)" value="add title">
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
title:'',
titles:['title1','title2','title3']
}
});
</script>
当我们添加title4到input里面的时候,里面就多了一个title4的元素。
@click指令是一个引发事件的指令,我们稍后会提到
6. v-if可以做为条件直接写在属性里面,条件可以是值,也可以写变量
v-if是判断属性值的true或者false来决定下一个语句是否执行
<div id="app">
<div class="titles">
<div v-if="hidden">display text</div>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
hidden:true
}
});
</script>
7. v-else没有值,直接写在属性里面
当然v-if可以和v-else配合使用。所以我们可以写成:
<div id="app">
<div class="titles">
<div v-if="hidden">display text</div>
<div v-else>another</div>
</div>
</div>
8. 在数组里可以写些Json数据
<div id="app">
<div v-for="title in titles">
<div>{{title.title}}</div>
<div v-if="title.checked">checked</div>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
titles:[
{title:"title1",checked:true},
{title:"title2",checked:false}
]
}
});
</script>
9. 在computed这个方法集里,可以把需要换算的算式写进去,把方法名直接写在双引号里就可以动态返回结果。
可以把computed属性,当作是data(数据)的延申,只是动态返回结果而已。
我们来看看下这个简单的税率结算器:
<div id="app">
<div>价格:{{price}}</div>
<input type="text" v-model="price">
<div>税:{{tax}}</div>
<div>总额:{{total}}</div>
</div>
<script>
new Vue({
el:"#app",
data:{
price:''
},
computed:{
tax:function(){
return this.price*0.1;
},
total:function(){
return parseInt(this.price)+parseInt(this.tax);
}
}
});
</script>
10. methods里面可以直接写方法,方法的变量可以是computed里面的方法名,直接引用在双括号里。
我们可以稍微修改下上面的例子,在每个数字签名加一个货币符号,比如$.
methods其实跟computed一样是一个属性,写法一样, 我们可以直接把方法的名称和变量放在里面。如:
<div id="app">
<div>价格:{{formated(price)}}</div>
<input type="text" v-model="price">
<div>税:{{formated(tax)}}</div>
<div>总额:{{formated(total)}}</div>
</div>
new Vue({
el:"#app",
data:{
price:''
},
methods:{
formated:function(price){
return '$'+price;
}
},
computed:{
tax:function(){
return this.price*0.1;
},
total:function(){
return parseInt(this.price)+parseInt(this.tax);
}
}
})
- 创建组件,组件由一个名称和对象组成,对象里面有template,这个是要渲染在组件里的。组件里面有属性props,是一个数组,这个对应这个组件里创建的属性名称。当对这个属性传值之后,就可以在模板里进行相应的传值了。
组件就像视图的一部分,可以把它分离出来,如:
<componentOne></componentOne>
然后我们可以在这里赋予它新的数据,并且可以把模板的部分提取出来,这样使得遍历数据这种任务变得很简单。定义上面得这种组件得方法很简单。组件里面有很多属性,可以分为两部分,第一个是名称,第二个是一个对象,里面包含其他得属性,如属性,模板,数据等。
Vue.components('componentOne', {
props:[],
template:``,
data:function(){
return "";
}
})
如果没有引入vue并且没有实例化得话组件肯定是不能用得。因为只有这样,实例化得数据才能用到组件里面。
new Vue({
el:"#app",
data:{
}
})
在component里面,data必须是一个方法,因为每个component必须有它得作用域。
<div id="app">
<cone v-for="blog in blogs" :blog="blog"></cone>
</div>
Vue.component("cone", {
props:['blog'],
template:`
<div>
<p>{{blog.title}}</p>
<p @click="toggle = ! toggle">details</p>
<p v-if="toggle">{{blog.content}}</p>
</div>
`,
data:function(){
return {
toggle:false
}
}
});
new Vue({
el:"#app",
data:{
blogs:[
{title:'title1', content:'this is the content 1'},
{title:'title2', content:'this is the content 2'}
]
}
})
- 在vue里用axios来请求
我们可以用axios来做http get或者post请求到API接口来返回数据与vuejs结合使用。
首先引入axios的CDN。
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
说到vue的生命周期,mounted应该是最重要的一个,mounted表明当vue载入的时候第一个要执行的程序。
<div id="app">
<ul v-for="post in posts">
<li v-text="post.title"></li>
<p v-text="post.body"></p>
</ul>
</div>
<script>
new Vue({
el:"#app",
mounted:function(){
axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => this.posts = response.data).catch((error) => console.log(error));
},
data:{
posts:[]
}
});
</script>
## FAQ:
1. Firefox错误:Components 对象已不赞成使用,它很快就会被移除。
网友评论