文章目录

一、Vue快速入门

1、第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
    {{message}}
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //MODEL:数据
        data:{
            message:"hello,vue!"
        }
    });
</script>
</body>
</html>

2、Vue基本语法

2.1、if判断

div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>NO</h1>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //MODEL:数据
        data:{
            ok: true,
            type: a
        }
    });
</script>

<h1 v-if="ok">Yes</h1>
<h1 v-else>NO</h1>
<h1 v-else-if ="type='a'">a</h1>```

2.2、for循环

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //MODEL:数据
        data:{
            items:[
                {message: '狂神说Java'},
                {message: '狂神前端'}
            ]
        }
    });
</script>

<li v-for="item in items">
{{item.message}}
</li>

2.3、事件

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

2.4、事件双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
   输入文本： <input type="text" v-model="message">{{message}}
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        }
    });
</script>
</body>
</html>

绑定单选框

<!--view层-->
<div id="app">
    <input type="radio" name="sex" value="男" v-model="message">男
    <input type="radio" name="sex" value="女" v-model="message">女
    <p>选中了谁：{{message}}</p>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        }
    });
</script>

绑定下拉框

<!--view层-->
<div id="app">
    <select v-model="message">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>value:{{message}}</span>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        }
    });
</script>

3、Vue组件

<!--view层-->
<div id="app">
    <geng v-for="item in items" v-bind:bang="item"></geng>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    Vue.component("geng",{
        props:['bang'],
        template:'<li>{{bang}}</li>'
    });
    var vm = new Vue({
        el:"#app",
        data:{
            items: ["java","linux"]
        }

    });
</script>

4、Axios异步通信

<!--v-clock：解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<!--view层-->
<div id="app" v-clock>
    <div>{{info.name}}</div>
    <a v-bind:href="info.url">点我</a>
    <div>{{info.page}}</div>
</div>
<!--第一步：导入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>
<script>
    var vm = new Vue({
        el:"#app",
        data(){
            return{
                //请求的返回参数格式必须合适，必须和json字符串一样
                info:{
                    name:null,
                    url:null,
                    page:null
                }
            }
        },
        mounted(){ //钩子函数 链式编程
            axios.get('../data.json').then(response=>(this.info = response.data));
        }
    });
</script>

5、计算属性

<div id="app">
    <p>{{currentTime1()}}</p>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            message:"hello"
        },
        methods: {
            currentTime1: function (){
                return Date.now(); //返回一个时间戳
            }
        },
        computes:{       //计算属性 : methods,computed方法名不能重名，重名之后，只会调用methods的方法
            currentTime2:function (){
                return Date.now();
            }
        }
    });
</script>

computed是一个属性，调用时用vm.currentTime2

而methods是方法，调用时用currentTime（）

计算属性可以想象成缓存

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的，此时可以考虑将这个结果缓存起来，采用计算属性可以做到这一点，计算属性主要特性是为了将不经常变化的结果进行缓存，以节约系统的开销。

6、插槽slot

<!--view层-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoitems" v-bind:item="item"></todo-items>
    </todo>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //定义slot插槽
    Vue.component("todo",{
        template:
        '<div>\
            <slot name="todo-title"></slot>\
            <ul>\
            <slot name="todo-items"></slot>\
            </ul>\
            </div>'
    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });
    var vm = new Vue({
        el:"#app",
        data:{
            title:"秦老师列表",
            todoitems:['狂神说java','狂神说前端','狂神说Linux']
        }
    });
</script>

7、自定义事件内容分发

<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //定义slot插槽
    Vue.component("todo",{
        template:
        '<div>\
            <slot name="todo-title"></slot>\
            <ul>\
            <slot name="todo-items"></slot>\
            </ul>\
            </div>'
    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item','index'],
        template: '<li>{{index}}---{{item}}<button @click="remove">删除</button></li>',
        methods:{
            remove: function (index){
                this.$emit('remove',index)
            }
        }
    });
    var vm = new Vue({
        el:"#app",
        data:{
            title:"秦老师列表",
            todoitems:['狂神说java','狂神说前端','狂神说Linux']
        },
        methods: {
            removeItem:function (index){
                console.log("删除了"+this.todoitems[index]);
                this.todoitems.splice(index,1);    //一次删除一个元素

            }
        }
    });
</script>

8、创建vue项目

1、创建初始化项目 vue init webpack hello-vue

2、进入工程目录 cd hello-vue

3、 安装vue-router npm install vue-router --save-dev

4、安装element -ui npm i element -ui -S

5、安装依赖 npm install

6、安装 SASS 加速器 cnpm install sass-loader node-sass --save-dev

7、启动测试 npm run dev

二、Vue实战

1、项目创建

1、新建一个存放项目的文件夹

2、打开dom窗口，进入存放项目的文件夹

3、执行命令：vue create yeb(项目名称) -------版本问题，在vue3版本以下会不兼容，需安装3版本以上

4、选择router和一个默认选项

5、启动项目 cd yeb -------npm run serve

6、使用Webstorm打开创建好的项目

2、项目开发

1、安装 ----饿了么-ui

执行命令：npm i element-ui -S

2、在main.js中配置element-ui

import ElementUI from ‘element-ui’;

import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI);

未完结

# vue.js # 前端 # javascript
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟