vue总结_胡须表达式-CSDN博客

本文链接：https://blog.csdn.net/kochiya_/article/details/114179498

本文深入探讨Vue.js，从ES特性、Vue入门到组件、路由和Watch属性。还介绍了Webpack的基本配置，包括CSS加载、热更新，并提到了Vue脚手架的使用。

摘要由CSDN通过智能技术生成

Vue

es特征

变量的声明

let a = 20;//使用let声明的是块级的
const a = 5;//此时a不能再被赋值

解构表达式

let arr = [1,2,3]
let [a,b,c] = arr
let obj = {
    name:"Tom",
    age:23
}
let {name,age,ss} = obj

箭头函数

let obj = {
    show1:function(a) {},
    show2:(b)=>{},
    show3(c){},
    show4:d=>console.debug(d)
}
// 引用
let {show1,show2,show3,show4} = obj
show1();....

vue入门

npm init -y

npm install/i vue

胡须表达式

<div id="app">
    <!--胡须表达式-->
    {{name}}
    {{show1()}}
</div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            name:"Tom",
            age:23,
            dept:{
                name:"HHH"
            }
        },
        methods:{
            show1(){
                alert("1")
            }
        }
    });
</script>

简单运算

<div id="app">
    <!--胡须表达式-->
    {{num1}}+{{num2}}={{num1-num2}}
</div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            num1:60,
            num2:10
        },
    });
</script>

三目运算

<div id="app">
    <!--胡须表达式-->
    {{sex?'男':'女'}}
</div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            sex:true
        },
    });
</script>

字符串操作

<div id="app">
    <!--胡须表达式-->
    {{str.substring(2,4)}}
    {{str.substr(2,4)}}
</div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            str:'itsource'
        },
    });
</script>

指令v-html，v-text

<div id="app" >
    <div v-html="str"></div>
    <div v-text="str"></div>
</div>

<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            str:'<h1>haha</h1>'
        },
    });
</script>

判断指令

<div id="app" >
    <div v-if="age<20">青年</div>
    <div v-else-if="age>20&&age<70">中年</div>
    <div v-else="age>=70">老年</div>
</div>

<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            age:22
        },
    });
</script>

指令bind

<div id="app">
<img src="image/keqing_fanart_by_yayachann_de7og85-fullview.jpg" height="1280" width="1024"/>
<!--方式一-->
<img v-bind:src="src" v-bind:height="height" v-bind:width="width"/>
<!--方式二-->
<img  :src="src" :height="height" :width="width"/>
<!--方式三-->
<img v-bind="img"/>
</div>
<script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                src:"..",
                height:"1280",
                width:"1024",
                img:{
                    src:"..",
                    height:"1280",
                    width:"1024",
                }
            },

        })
 </script>

指令for

<div id="app" >
    <!--遍历数字-->
    <div v-for="v in num">{{v}}</div>
    <!--遍历字符串-->
    <div v-for="(v,k) in str">{{v}}---{{k}}</div>
    <!--遍历对象-->
    <div v-for="(v,k,i) in obj">{{v}}---{{k}}===={{i}}		</div>
</div>

<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            num:2,
            str:"show",
            obj:{
                name:"show",
                age:18,
                sex:'男'
            }
        },
    });
</script>

指令on

<div id="app" >
    //方式一
    <button v-on:click="show()">按钮</button>
	//方式二
	<button @click="show()">按钮</button>
</div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{show(){alert("show")}},
	});
</script>

组件

完成特定功能的自定义html标签

组件分类：

全局组件：全局都可以用

Vue.component("mycomponent",{
     template:"<h1>我是全局组件</h1>"
})

局部组件：只有局部可以用

new Vue({
	el:"#test1",
	/*局部组件*/
	components:{
		"inner":{
			template:"<h1>我是局部组件</h1>"
		}
	}
})

注意：
- html标签的名字尽量小写，要是有大写，使用时用-隔开
- 定义的模板有且只能有一个根标签

组件模板

模板写在template中

html中写模板（常用）,或者直接将模板放到标签中

<template id="tem">
        <div>
            username:<input type="text" /><br>
            password:<input type="password" />
        </div>
</template>

js中写模板

<script type="text/template" id="tem1">
        <div>
            name:<input type="text" /><br>
            pwd:<input type="password" />
        </div>
</script>

从模板中获取数据

数据要在组件中，只能在自己的模板中使用自己的数据

模板中准备一个data函数，函数的返回值要是json格式（全局和局部一样）

Vue.component("mycomponent",{
                template:"#tem",
                data(){
                    return{
                        name:"张三"
                    }
                }
            })

路由

路由不包含在vue中，是一个插件，需要单独下载

npm安装: npm install vue-router

//需要导入2个js vue必须在前
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>


<div id="test">
   <!--关联路由地址-->
   <router-link to="/index">首页</router-link>
   <!--告诉vue，组件渲染的位置-->
   <router-view></router-view>
</div>
<script type="text/javascript">
/*1.准备组件*/
    let index = Vue.component("index",{
        template:"<h1>首页</h1>"
    })
/*2.创建路由*/
    let router = new VueRouter({
        routes:[{path:"/index",component:index},]
    })

    new Vue({
        el:"#test",
        /*3.使用路由*/
        router
    })
</script>

watch属性

用来监听值的变化

<script type="text/javascript">
    new Vue({
        el:"#test",
        data:{
            msg:""
        },
        watch:{//名字要跟data中的属性名一致
            msg(新值,旧值){}
        }
    })
</script>

webpack

镜像(可以不需要安装):npm i -g cnpm --registry=https://registry.npm.taobao.org

打包npm下载:

cnpm install -g webpack

cnpm install -g webpack-cli

根目录配置webpack.config.js文件打包

var path = require("path");
module.exports = {
entry: '这是要打包的js',
    output: {
        path: path.resolve(__dirname, '打包后存放的地址'),
        filename: '保存名字'
    }
},
//css加载
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["to-string-loader", "css-loader"],
      },
    ],
  },
};

css加载

cnpm install style-loader --save-dev (使用css的加载器)

cnpm install css-loader --save-dev （编译css的加载器）

打包的js中引用(2中)

require(‘引入所需要的css’)

import css from “file.css”

使用命令webpack 进行打包

热更新

npm install webpack-dev-server --save-dev

添加中package.json启动脚本

"scripts": {
   ...,
   "dev": "webpack-dev-server --inline --progress --config ./webpack.config.js",  }

package.json中更新版本

"devDependencies": {
  "css-loader": "^3.1.0",
  "style-loader": "^0.23.1",
  "webpack": "^3.10.0",
  "webpack-dev-server": "^2.9.7"
},

执行 cnpm install 更新版本

再npm run dev运行

脚手架

安装:npm install -g vue-cli

创建:vue init webpack