Javascript

Vue

本文主要是介绍Vue，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目录
  • VUE
    • v-bind绑定
    • v-if/v-else-if/v-else
    • v-for
    • v-on/Vue.methods
    • v-model
    • 定义VUE组件
    • Axios异步通信

VUE

介绍 — Vue.js (vuejs.org)

v-bind绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  导入vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <span v-bind:title="message">
        鼠标停悬几秒查看此处动态绑定的提示信息~
    </span>

</div>
<script>
    var vm = new Vue({
        el:"#app",
        // Model层
        data:{
            message:"hello,vue!"
        }
    });
</script>
</body>
</html>

v-if/v-else-if/v-else

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--  导入vue.js  -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--view层 模板-->
<div id="app">

  <h1 v-if = "type==='A'">AAA</h1>
  <h1 v-else-if = "type==='B'">BBB</h1>
  <h1 v-else-if = "type==='C'">CCC</h1>
  <h1 v-else>dddd</h1>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        // Model层
        data:{
            type: "A"
        }
    });
</script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--  导入vue.js  -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--view层 模板-->
<div id="app">
  <li v-for="(item,index) in items">
    {{item.message}}---{{index}}
  </li>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        // Model层
        data:{
            items: [
              {message: "123"},
              {message: "345"}
            ]
        }
    });
</script>
</body>
</html>

v-on/Vue.methods

  • 方法必须定义在vue的Method对象中 v-on:事件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--  导入vue.js  -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--view层 模板-->
<div id="app">
  <button v-on:click="sayHi">sayHi</button>
    <br>
  <button v-on:click="smile">smile</button>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        // Model层
        data:{
          message: "Summer"
        },
        methods: {//方法必须定义在vue的Method对象中 v-on:事件
          sayHi: function(a){
            alert(this.message)
          },
          smile: function(a){
            alert(this.message)
          }
        }
    });
</script>
</body>
</html>

v-model

  • 表单双向绑定：v-model指令在表单input tesxarea select 元素上双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<div id="app">
    <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
    {{message}}
    <br>
    性别：
    <input type="radio" name="sex" value="男" v-model="check">男
    <input type="radio" name="sex" value="女" v-model="check">女
    <p>
        选中了:{{check}}
    </p>
    <br>
    下拉框：
    <select v-model="select">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
    value：{{select}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        // Model层
        data:{
          message: "Summer",
          check:"",
          select:""
        },
        methods: {//方法必须定义在vue的Method对象中 v-on:事件
          sayHi: function(a){
            alert(this.message)
          },
          smile: function(a){
            alert(this.message)
          }
        }
    });

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

定义VUE组件

  • 定义标签
  • 用Vue.component 一个组件名一个对象
    • 定义组件名
    • 对象中用props绑定参数 template定义模板
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--  导入vue.js  -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--view层 模板-->
<div id="app">
<!--    组件：传递给组件中的值：props-->
    <summer v-for="item in items" v-bind:bang="item"></summer>
</div>
<script>
//定义一个vue组件
    Vue.component("summer",{
        props:['bang'],
        template: '<li>{{bang}}</li>'
    });

    var vm = new Vue({
        el:"#app",
        // Model层
        data:{
          items: ["Summer","Spring"]
        }
    });
</script>
</body>
</html>

Axios异步通信

通信一般想到JQuery，但是JQuery操作DOM太频繁，不推荐用

分类：鼠标事件 | jQuery API中文文档(适用jQuery 1.0 - jQuery 3.3.1) (html.cn)



  • 钩子函数 链式函数 ES6新特性

data.json

{
  "message": "hello,vue!",
  "links": [
    "a",
    "b"
  ],
  "url": "https://www.baidu.com"
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--v-clock解决闪烁问题  display: none; 没加载前白屏-->
    <style>
       [v-clock]{
           display: none;
       }
    </style>
</head>
<body>
<!--  导入vue.js  -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--view层 模板-->
<div id="app" v-clock>
    <div>{{info.message}}</div>
    <div>{{info.links}}</div>
    <a v-bind:href="info.url">点我</a>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        //data:{}, vue的data属性
        data(){
            return{//return的是一个格式
                //请求的返回参数合适，必须和json字符串一样
                info:{
                    message:null,
                    url:null,
                    links:[]
                }
            }
        },
        mounted() {    //钩子函数 链式函数 ES6新特性
            //jQuery和Ajax都可以在这里处理 但是要处理dom
            //axios 用到 data(){return{}}格式即可绑定
            axios.get('../data.json').then(response => (this.info=response.data));
        }
    });
</script>
</body>
</html>
这篇关于Vue的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航