ES6语法和vue基础

最新推荐文章于 2024-05-17 11:40:43 发布

Rk..

最新推荐文章于 2024-05-17 11:40:43 发布

阅读量798

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_46979453/article/details/122821362

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、ES6语法

1、声明变量

//之前使用var
var a='a';
//ES6中使用let声明变量
let b='b';//let是局部变量，var是全局变量 let定义的变量出了定义的代码块无法使用，var可以

2、声明常量

 //ES6中声明常量，常量一旦定义，它的值就不能被改变
    const a=1;

3、结构表达式

<script type="text/javascript">
    //ES6中结构表达式
    var array=["张根硕","古巨基","阮经天"];
    //结构数组
    var [a,b,c]=array;
    console.log(a,b,c);
    //结构对象
    var person={
        name:"王敏",
        age:20,
        sex:true,
        say:function (){
            alert("我是王敏")
        }
    }
    //结构对象的时候，属性名要一致
    var {name,age,sex,say}=person;
    console.log(name,age,sex);
    say();//此时say方法可以直接调用
</script>

4、ES中声明函数的三种表达式

<script type="text/javascript">
    //方式一
    function say1(){
        alert("方式1")
    }
    
    //方式二:箭头表达式
   var say2=(name)=>{
        alert("方式2"+name);
    }
    
    //方式三:如果参数只有1个，可以不写()，如果函数体只有1句话，{}可以不写
   var say3=()=>alert("方式3");
    
   say1();
   say2("王敏");
   say3();
</script>

二、使用yarn创建vue项目

        1. 安装脚手架
           yarn global add @vue/cli
        2. 使用脚手架创建项目
           vue create 项目名     ||    vue ui(图形化创建了解)
        3. 启动项目
           yarn serve

启动成功:

   //切换为淘宝镜像
        yarn config set registry https://registry.npm.taobao.org/
    //启动服务器后, 端口默认8080
        http://IP:8080    -> 访问vue项目页面

三、自定义组件

1、自定义组件创建

    1. 新建一个xxx.vue文件(.vue就是一个组件)
       建议:所有组件首字母大写,采用驼峰
   2. 书写组件三大部
       template -- 组件结构(html)必须要有一个根元素
       script    -- 组件行为(js)
       style     -- 组件样式(css)

2、使用自定义组件 xxx.vue

    组件默认为自动暴露出去
   1. 引入自定义组件
       <script>
           import 组件名(变量) from './xxxx.vue'
   2. 注册组件
       export default {
           components: {
               组件名 //key组件名:value组件的变量如果key和value一样时可以直接写组件名
           }
       }
   3. 在template中使用标签渲染即可
       <组件名/>

3、HTML页面中自定义组件

1、全局组件和局部组件

局部组件:Vue实例里面创建的
new Vue({
    el: "#app2",
    data: {},
    components : {
        "mycomponent3" : {
            template : "<h1>这是一个局部组件</h1>"
        }
    }
    });

全局组件:
  Vue.component("myComponent1",{
      template : "<h1>这是第一个全局组件</h1>"
    })

    var component2Config = {
        template : "<h1>这是第二个全局组件</h1>"
    };
    Vue.component("mycomponent2",component2Config);

局部组件:只能在它所挂载的标签下使用(例如上面的mycomponent3只能在id为app2的标签下使用)

全局组件:可以在全局任何地方使用

注意:如果是组件的命名是驼峰命名，那使用该组件的时候全部小写，大写的字母前加一个-

例如上面的myComponent1组件，如果要使用要<my-component1></my-component1>

2、组件模板

上面定义的组件，template只有一个标签，如果组件中需要多个标签可以定义<template>

body中写:template中需要一个根标签

<template id="mytemplate">
   <div>
       <h1>你好</h1>
       <h2>vue</h2>
   </div>
</template>

定义组件:
 Vue.component("myComponent1",{
      template : "#mytemplate",
    })

四、指令

3.1 、什么是指令

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.

3.2、常见的指令

        v-text=“表达式” 设置标签中的文本 .innerText
        v-html=“表达式” 设置标签中的html .innerHTML
        v-if=“表达式”    判断条件 :操作节点元素，对元素进行新增和删除

v-show=“表达式” 判断是否隐藏:操控元素的css,display属性让其隐藏和显示
v-for=“表达式” 循环

v-bind=”表达式” 绑定动态属性:动态属性可以获取data或者是循坏里的动态数据
v-on=“表达式” 绑定事件，缩写@事件名=‘函数’

v-model=“表达式” 数据双向绑定,获取value值

3.3、vue的计算属性

计算属性的重点突出在属性两个字上（属性是名词），首先它是个属性其次这个属性有计算的能力（计算是动词），这里的计算就是个函数。

<body>
<div id="app">
    输入干活的天数:<input type="text" v-model="days"/>
    <br>
    你的工资是:{{totalMoney}}

</div>
</body>
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            days:0,
        },
        computed:{//计算属性
            totalMoney(){
                var total=this.days*300;
                return total;
            }
        }
    })
</script>

五、路由

1、什么是路由

路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。

2、使用路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE路由</title>
</head>
<body>
<div id="app">
   <router-link to="/">首页</router-link>
   <router-link to="/about">关于我们</router-link>
   <router-link to="/product">产品</router-link>
</div>
</body>
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<script  type="text/javascript" src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script type="text/javascript">
    //>>1.定义首页:组件
    var index = Vue.component("index", {
        template : "<h1 id='shou'>首页</h1>",
    });
    //>>2.公司产品：组件
    var product = Vue.component("product", {
        template : "<h1>公司产品</h1>"
    });
    //>>3.关于我们：组件
    var about = Vue.component("about", {
        template : "<h1>关于我们</h1>"
    });


    //>>4.创建一个路由：
    var router = new VueRouter({
        routes : [ {
            path : "/",//路由地址
            component : index
            //路由对应的资源
        }, {
            path : "/about",//路由地址
            component : about
            //路由对应的资源
        }, {
            path : "/product",
            component : product
        }, ]
    });

    //创建一个vue对象
    var app = new Vue({
        el : "#app",//挂载在app上
        router : router//使用路由对象
     });

</script>
</html>

Rk..

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
ES6语法和vue基础

一、使用yarn创建vue项目1. 安装脚手架 yarn global add @vue/cli 2. 使用脚手架创建项目 vue create 项目名 || vue ui(图形化创建了解) 3. 启动项目 yarn serve 启动成功: //切换为淘宝镜像yarn config set registry https://regi...
复制链接

扫一扫