VUE框架简单基础

一个构建用户界面的框架

通过指令,来给DOM元素赋值或者其他操作。

1. 简单的指令及其作用:

在HTML标签中显示数据:
  --> {{}}
  --> v-text
  --> v-html
  这三条指令都是给HTML具体标签填充内容,可以是文本,也可以是其他标签
  -------------------
  --> v-if
  --> v-else
  这两条命令配合使用,如果变量为true,则插入if所在的标签,否则就插入else所在的标签。
  -------------------
  --> v-show
  如果变量为true则显示v-show所在的标签,否则隐藏v-show所在的标签,即添加属性display: none;
  注意和v-if的区别:一个是插入/删除标签的操作,一个是显示/隐藏标签的操作(标签一直都存在)
  -------------------
  --> v-for 循环数组或者对象{}
  --> v-bind 绑定标签的属性,随时修改
  --> v-on 为标签绑定事件
  例子:
  <head>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{v1}}</p>
      <p v-text="v1"></p>
      <p v-html="v2"></p>
      <p v-if="v3">哈哈哈</p>
      <p v-else="v3">呜呜呜</p>
      <p v-show="v3">嘻嘻嘻</p>
      
<a v-bind:href="url">{{url}}</a>
      <input type="button" v-on:click="showtest"/>
    </div>
    
    <div id="fTest">
    <ul>
     <li v-for="item in d1">
    {{item}}
     </li>
    </ul>

    <ul>
     <li v-for="(item,index) in d1">
     {{index}},{{item}}
     </li>
     </ul>

     <ul>
     <li v-for="(val,key) in d2">
     {{key}},{{val}}
     </li>
     </ul>
    </div>

    
    <script>
      var vm = new Vue({
        el:"#app",
        data:{
          v1:"哈喽",
          v2:"<a>hello</a>",
          v3:true,
          url:"http://www.baidu.com"
        },
        methods:{
           showtest: function(){
              alert(123)
           }
        }
      })

      var f = new Vue({
       el:"#fTest",
       data:{
       d1:[11,22,33,44],
       d2:{'name':'egon','age':23,'weight':45,'height':180}
       }
      })

    <script>
  </body>

 2. v-model的使用:

数据的双向绑定:应用于input标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
用户名:<input type="text" v-model="username">
密码:<input type="password" v-model="password">
<input type="button" value="登录" @click="login">
</div>

<script>

var vm = new Vue({
el:"#app",
data:{
username:'',
password:''
},
methods:{
login:function () {
console.log(this.username+" "+this.password) #可以直接取到input标签中输入的值,而不必去找到标签,然后再取值
}
}
})

</script>
</body>
</html>
 

 

应用在select标签:
<div id="app1">
<select name="city" v-model="v1">
<option value="1">衡水</option>
<option value="2">石家庄</option>
<option value="3">保定</option>
<option value="4">唐山</option>
</select>
<input type="button" value="提交" @click="sel">
</div>

<script>
var c = new Vue({
el:"#app1",
data:{
v1:'1' #默认选中衡水
},
methods:{
sel:function () {
console.log(this.v1)
}
}
})
</script>
 

3. axios(异步请求)的应用

类似于ajax
主要有两种请求方式:get和post
1.get请求:有两个参数
        --->1 请求的url
        --->2 请求需要加在url后面的参数params
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script src="axios.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="加载数据" @click="load">

<p v-text="v1"></p>
</div>

<script>

var vm = new Vue({
el:"#app",
data:{
v1:''
},
methods:{
load:function () {
url='index/load/'; #去哪请求数据
var self = this; #这个this指的是vm
axios.get(url,{
params:{
'name':'egon',
'age':13
}
}).then(function (response) {
               console.log(this) #这里的this是Windows object,不能取到data中的值
self.v1 = response; #把返回的数据赋值给vm中的变量v1
console.log(response)
}).catch(function (err) {
console.log(err)
})
}
}
})

</script>
</body>
</html>
 
2.post请求
有三个参数:
  -->1 url,往哪发送数据
  -->2 {},要发送的数据,最外层是字典,数据以键值对存在
  -->3 {},携带请求头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script src="axios.js"></script>
</head>
<body>
<div id="app">
用户名:<input type="text" v-model="username">
密码:<input type="password" v-model="pwd">
<input type="button" value="提交" @click="login">
</div>

<script>

var vm = new Vue({
el:"#app",
data:{
username:'',
pwd:''
},
methods:{
login:function () {
url='hotcity.json';
axios.post(url,
{
username:this.username,
pwd:this.pwd
},{
'headers':{'Content-Type':'application/x-www-form-urlencode'}
}).then(function (response){
console.log(response)
}).catch(function (err){

})
}
}
});

</script>
</body>
</html>
 

 二、通过脚手架创建VUE工程:

  --> 安装脚手架

    npm install vue-cli -g

  -->创建基于webpack模板的项目

    vue init webpack myProject

  -->进入项目并安装依赖

    cd myProhect

    npm install

  -->启动项目

    npm run dev

 

posted @ 2017-11-16 15:35  背着石头的小蚂蚁  阅读(499)  评论(0编辑  收藏  举报