vue快速入门

来源：互联网发布：python脚本实例编辑：程序博客网时间：2024/05/27 00:49

vue基础：

0.插值表达式：{{}}

1.指令：

1.1 v-html,v-text

<p v-html="str"></p>//用于绑定字符串，会自动解析标签
<p v-text="info"></p>//用于绑定文本信息

1.2 v-on

<div v-on:click="fastClick">点我有惊喜</div><div @click="fastClick">点我有惊喜</div>//这是简写形式

1.3 v-if

1.4 v-show

与v-if相似，用于控制是否出现，v-show是状态的改变（display），而v-if是是否添加或删除节点元素。

<p v-show="isShow">我是P标签</p>

1.5 v-bind 用于绑定属性：

<img v-bind:src="img_url" alt="">

<div :id="boxid"></div>//这是简写方式

1.6 v-model//数据双向绑定

<input type="text" name="" v-model="msg"value="">

1.6 v-for

<div v-for="(item,index) in lists" :key="index">
{{index}} {{item}}
</div>

如果发现我们遍历的dom结构一样，只是数据不一样，就可以不用写key，默认不写就是就地复用
如果发现，我以后，需要对生成好的dom结构进行更改(删除、更改)，最好给其加上key

2 组件

5种组件定义方式：

方式一：

//定义 
var logincomponents =Vue.extend({
template:'<p>ads</p>'
})
//注册
Vue.component('login',logincomponents)
//使用时直接将login当标签使用。在挂载的根元素中使用<login></login>

方式二：将定义和注册写在一起

Vue.component('login',{
template:'<p>{{msg}}</p>',
data:function(){
return {
msg:'傻逼'
}
}
})

方式三：

<scriptid="template">
<p><span>{{msg}}</span></p>
</script>

Vue.component('login',{
template:'#template',
data:function(){
return {
msg:'傻逼'
}
}
})

方式四：

<templateid="template">
<p><span>{{msg}}</span></p>
</template>

Vue.component('login',{
template:'#template',
data:function(){
return {
msg:'傻逼'
}
}
})

方式五：

创建的是.vue文件

<template>
<div class="mui-content">
</div>
</template>
<style scoped>//使用scoped样式只会在当前主件中有效
</style>
<script>
//导入其它模块
import common from '../../common/common.js'
//导出Vue对象
export default{
// data:function(){ //es3
// return {
// }
// }
data(){

//es5
return {newslist:[] }},
created(){//Vue框架内部会自动调用 },

methods:{}
}
</script>

3 filter

//局部过滤器

var vm =newVue({
el:'#app',
data:{
ss:'ssss'
},
filters:{
//局部过滤器
upperCase(data){
return data.toUpperCase();
}
}
})

//全局过滤器

Vue.filter('toUpperCase',function(input){
return input.toUpperCase()
})

4 路由

使用路由需要导入路由组件

</script><scriptsrc="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>

template中：

<div id="app">
<!-- 触发连接的代码 -->
<router-linkto="/goodslist">商品列表</router-link>
<router-linkto="/newslist/1001">新闻列表</router-link><br/>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
script中：

//1、定义组件（不要注册）
var goodslistComponent =Vue.extend({
template:'<ul><li>洗发水</li><li>三只松鼠</li><li>保暖内衣</li></ul>'
})
var newsComponent =Vue.extend({
template:'<ul><li>隧道出问题了{{$route.params.newId}}</li><li>冷空气来袭</li><li>携程事件</li></ul>'
})
//2.创建路由对象，设置好路由规则
var router =newVueRouter({
routes:[
{path:'/',redirect:'/goodslist'},
{path:'/goodslist',component:goodslistComponent},//设置路由规则，就会注册组件
{path:'/newslist/:newId',component:newsComponent}]})
//3.创建Vue实例，并且注入路由对象
var vm =newVue({
el:"#app",
router:router //把路由对象注入到根实例中，这样项目才拥有路由功能
})

5 网路请求

这同样需要引入主件：

<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>

var vm =newVue({
el:"#app",
methods:{
getLogin:function(){
var url ="http://127.0.0.1:3000/login?username=zhangsan&password=455"
this.$http.get(url).then(function(response){
console.log(response.body)})},
PostLogin(){
var url ="http://127.0.0.1:3000/postLogin"
// emulateJSON:true//设置请求头
this.$http.post(url,{username:'lisi',password:'magnmazi'},{emulateJSON:true}).then(function(response){
console.log(response.body)})},
jsonpDouban:function(){
var url ="https://api.douban.com/v2/movie/top250"
this.$http.jsonp(url).then(function(response){
console.log(response.body)
})}}})

阅读全文

1 0