全栈Web开发 Python & VueCli 学习笔记（三）

博主： shrimprex
发布时间：2021 年 04 月 25 日
1394 次浏览
暂无评论
4838字数
分类：日常

## vue的基本使用

1. 先看看[官网教程](https://https://cn.vuejs.org/v2/guide/)
2. 在和django结合使用的时候，由于两者默认都使用{{ }}来代表变量，会有冲突，可以通过`delimiters`进行修改

```html
   <!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](http://hgww.top/usr/uploads/2021/04/3696518912.png)

## v-if 示例

<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](http://hgww.top/usr/uploads/2021/04/2042135963.png)

## v-for 循环示例

```html
<!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](http://hgww.top/usr/uploads/2021/04/240631856.png)

## v-model数据双向绑定示例

```html
<!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">

Jack John Mike
Checked names: {{ checkedNames }}

One
Two
Picked: {{ picked }}

``` ![image.png](http://hgww.top/usr/uploads/2021/04/3589684905.png) ## v-on事件绑定示例 ```html

``` ![image.png](http://hgww.top/usr/uploads/2021/04/2171753468.png) ## 组件基础示例 ```html

hi...h2

hi...h3

``` ![image.png](http://hgww.top/usr/uploads/2021/04/3256966112.png) ## 使用axios获取数据示例 ```html ``` ![image.png](http://hgww.top/usr/uploads/2021/04/72883452.png) ## 修改之前编写的页面通过vue来实现循环和判断，实现页面的无刷新切换 ```html

[[user.nickName]]

``` ![image.png](http://hgww.top/usr/uploads/2021/04/3566180140.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 ```

vue的基本使用

先看看官网教程

在和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>

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>

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>

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>

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>

组件基础示例

<!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>

使用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>

修改之前编写的页面

通过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>

安装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 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址