vue的基本使用

  1. 先看看官网教程

  2. 在和django结合使用的时候，由于两者默认都使用{{ }}来代表变量，会有冲突，可以通过delimiters进行修改

    <!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">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Vue Test</title>
</head>
<body>
    <div id="app">
        <h1>[[ message ]]</h1>
    </div>
    <script>
        var app = new Vue({
            delimiters:['[[', ']]'],
            el:'#app',
            data:{
                message:'Hello Vue'
            }
        })
    </script>
</body>
</html>

    image.png

v-if 示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div v-if="type === 'A'">
      A
    </div>

    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
    <h1 v-show="ok">Hello!</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        type : "D",
        ok : true,
    }
});
</script>
<style type="text/css">

</style>
</body>
</html>

image.png

v-for 循环示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item,index in items" :key="index">
        {{index}} - {{ item.message }}
        </li>
    </ul>
    <ul>
        <li v-for="value, key in object">
            {{key}} : {{ value }}
        </li>
    </ul>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        items : [
            { message: 'Foo' },
            { message: 'Bar' }
        ],
        object: {
            title: 'How to do lists in Vue',
            author: 'Jane Doe',
            publishedAt: '2016-04-10'
        }
    }
});
</script>
</body>
</html>

image.png

v-model数据双向绑定示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div id="example-1">
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
        <textarea v-model="message2" placeholder="add multiple lines"></textarea>
        <p style="white-space: pre-line;">{{ message2 }}</p>
        <br />

        <div style="margin-top:20px;">
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            <span>Checked names: {{ checkedNames }}</span>
        </div>

        <div style="margin-top:20px;">
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">One</label>
            <br>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for="two">Two</label>
            <br>
            <span>Picked: {{ picked }}</span>
        </div>
        <button type="button" @click="submit">提交</button>
    </div>

</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        message : "test",
        message2 :"hi",
        checkedNames : ['Jack', 'John'],
        picked : "Two"
    },
    methods: {
        submit : function () {
            var postObj ={
                msg1 : this.message,
                msg2 : this.message2,
                checkval : this.checkedNames,
                picked : this.picked
            };
            console.log(postObj);
        }
    }
});
</script>
<style type="text/css">

</style>
</body>
</html>

image.png

v-on事件绑定示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div id="example-1">
        <button v-on:click="counter += 1"> 数值 :  {{ counter }} </button><br />
        <button v-on:dblclick="greet('老铁666', $event)">双击</button>
    </div>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        counter: 0,
        name : "vue"
    },
    methods:{
        greet : function (str, e) {
            alert(str);
            console.log(e);
        }
    }
});
</script>
<style type="text/css">

</style>
</body>
</html>

image.png

组件基础示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <button-counter title="title1 : " @clicknow="clicknow">
        <h2>hi...h2</h2>
        <h3>hi...h3</h3>
    </button-counter>
    <button-counter title="title2 : "></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter', {
    props: ['title'],
    data: function () {
        return {
          count: 0
        }
    },
    template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button><slot></slot></div>',
    methods:{
        clickfun : function () {
            this.count ++;
            this.$emit('clicknow', this.count);
        }
    }
})
var vm = new Vue({
    el : "#app",
    data : {

    },
    methods:{
        clicknow : function (e) {
            console.log(e);
        }
    }
});
</script>
<style type="text/css">

</style>
</body>
</html>

image.png

使用axios获取数据示例

      <script>
        new Vue({
            delimiters:["[[","]]"],
            el:'#home',
            data:{
                classes:[]
            },
            mounted() {
                this.getData()
            },
            methods:{
                getData() {
                    axios({
                        url:'/api/',
                        type:'json',
                        method:'get',
                    }).then((res)=>{
                        console.log(res.data.classes)
                        this.classes = res.data.classes;
                    })
                }
            },
        })
    </script>

image.png

修改之前编写的页面

通过vue来实现循环和判断，实现页面的无刷新切换

<div id='home'>
        <header>
            <div id='title'><a href='/'>{{ siteinfo.title }}</a></div>
            <img class='logo' src="/uploads/{{ siteinfo.logo }}" alt="logo">
        </header>
        <div id="container">
            <nav>
                <div v-if="item.id == choosed" v-for="item in classes" style="background-color: #777;color: #fff;border: 1px solid #000000;">[[item.text]]</div>
                <div v-else @click="choose(item.id)">[[item.text]]</div>
            </nav>
            <div v-if="item.id == choosed" v-for="item in classes" class='users'>
                <div v-for="user in item.userlist" class='userlist'>
                    <img class='tx' :src="user.headImg" alt="tx">
                    <br>
                    <span class='username'>[[user.nickName]]</span>
                </div>
            </div>
        </div>
        <footer>
            <span>copyright &copy shrimprex @ 2021</span>
        </footer>
    </div>
    <script>
        new Vue({
            delimiters:["[[","]]"],
            el:'#home',
            data:{
                classes:[],
                choosed:1,
            },
            mounted() {
                this.getData()
            },
            methods:{
                getData(){
                    axios({
                        url:'/api/',
                        type:'json',
                        method:'get',
                    }).then((res)=>{
                        console.log(res.data.classes)
                        this.classes = res.data.classes;
                    })
                },
                choose(id){
                    // console.log(id),
                    this.choosed=id
                }
            },
        })
    </script>

image.png

安装node.js和设置cnpm，安装vue-cli

安装 npm

npm 全称为 Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。

npm -v

由于网络原因 安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 vue-cli

cnpm install -g @vue/cli

安装 webpack

webpack 是 JavaScript 打包器(module bundler)

cnpm install -g webpack
最后修改：2021 年 04 月 27 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏