Vue2-基础使用模板
data和el的第一种写法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>VUE</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><div id="root">你好：{{name}}，{{address}}</div><script type="text/javascript">new Vue({el:"#root",data(){return {name: "马朋帅",address:"唐县"}}})</script>
</body>
</html>
data和el的第二种写法
// 第一种
new Vue({el:"#root"
})
// el第二种和data的第二种（data必须用第二种）
let v = new Vue({data(){return {name: "马朋帅"}}
})
v.$mount('root')
methods
<script>
new Vue({methods:{open1(){console.log("v-on");},open2(){console.log("@");}}
})
</script>
computed
注意：计算方法里面用到的任何一个date里面的数据发生变化，方法都会重新计算一遍
<div>{{aaa}}</div>
<script>
new Vue({data(){return {name: "马朋帅",age:"23"}}computed:{// 简写aaa(){return this.name+this.age; //name和age任何一个改变aaa()都会重新执行一遍}}
})
</script>
正确写法，不加括号：{{aaa}}，错误写法：{{aaa()}}
<div>{{aaa}}</div>
<script>
new Vue({data(){return {name: "马朋帅",age:"23"}}computed:{// 完整写法aaa:{get(){return this.name+age;},set(value){this.name = value;}}}
})
</script>
{{aaa}} 解析时会调用 get()方法
this.aaa = “mps” ，设置他的值时会调用set(value)方法,参数 value就是 “mps”
watch
简写
<body>
<div id="root"><button @click="num++">按钮</button>
</div>
<script type="text/javascript">new Vue({el: "#root",data() {return {num: 1}},watch: {num(newValue,oldValue) {console.log(newValue,oldValue)}}})
</script>
</body>
另一种写法
<body>
<div id="root"><button @click="num++">按钮</button>
</div>
<script type="text/javascript">const vm = new Vue({el: "#root",data() {return {num: 1}}})vm.$watch('num',function (newValue,oldValue){console.log(newValue,oldValue)})
</script>
</body>
监视data里面的值
<body><div id="root"><button @click="num++">按钮</button></div><script type="text/javascript">new Vue({el:"#root",data(){return {num:1}},watch:{num:{ // 监视num变量handler(newValue,oldValue){console.log(newValue,oldValue)}}}})</script>
</body>
监视computed
（里面的函数）
<body><div id="root"><button @click="num++">按钮</button></div><script type="text/javascript">new Vue({el:"#root",data(){return {num:1}},computed:{aaa(){return this.num;}},watch:{aaa:{handler(newValue,oldValue){console.log(newValue,oldValue)}}}})</script>
</body>
初始化时执行一次
<body><div id="root"><button @click="num++">按钮</button></div><script type="text/javascript">const vm = new Vue({el:"#root",data(){return {num:1}},watch:{num:{ immediate:true, // 初始化时就调用一次handler函数handler(newValue,oldValue){console.log(newValue,oldValue)}}}})// 另一种写法vm.$watch('num',{immediate:true,handler(newValue,oldValue){console.log(newValue,oldValue)}})</script>
</body>
深度监视普通写法
（‘obj.a’）a属性改变时触发handler()
<body><div id="root"><button @click="obj.a++">a++</button></div><script type="text/javascript">const vm = new Vue({el:"#root",data(){return {obj:{a:1}}},watch:{'obj.a':{handler(){console.log("a改变了")}}}})</script>
</body>
深度监视正确写法
（deep：true）a，b改变都触发handler()
<body><div id="root"><button @click="obj.a++">a++</button><button @click="obj.b++">b++</button></div><script type="text/javascript">const vm = new Vue({el:"#root",data(){return {obj:{a:1,b:1}}},watch:{obj:{deep:true,handler(){console.log("obj改变了")}}}})</script>
</body>
过滤器filters
可以用在v-bind和 {{ }} 里面，用 | 分割
例：{{ message | filterA | filterB }} message为 filterA 的第一个参数，filterA 的结果为 filterB 的第一个参数
局部过滤器
<div id="root"><div v-bind:name="name | capitalize"></div><ul><li v-for="num of list ">{{num}}--{{num | capitalize1}}--{{num | capitalize2("a")}}--{{num | capitalize1 | capitalize2("a")}}</li></ul></div>
<script type="text/javascript">const vm = new Vue({el: "#root",data() {return {name : "张三",list:[0,1,2,3,4,5,6]}},filters: {capitalize(value){return value + '啊'},capitalize1(value){return value+10},capitalize2(value,str){return value+str}}})
</script>
全局过滤器
<script type="text/javascript">Vue.filter('capitalize', function (value) {return value+"全局过滤器"})new Vue({el: "#root",data() {return {}}})
</script>
脚手架后目录结构
.文件目录
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png: 自己引入的图片
│ │── component: 存放组件
│ │ ├── Student.vue: 自定义组件
│ │ └── School.vue: 自定义组件
│ │── App.vue: 汇总所有组件
│ └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── .eslintrc.js: 可以解决组件名语法错误问题（自己创建该文件）
├── vue.config.js: 自定义配置文件（上这儿配置东西）
└── package-lock.json: 包版本控制文件
几个主要文件
.eslintrc.js 文件（直接用）
module.exports = {root: true,env: {node: true},'extends': ['plugin:vue/essential','eslint:recommended'],parserOptions: {parser: '@babel/eslint-parser'},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',//在rules中添加自定义规则//关闭组件命名规则"vue/multi-word-component-names":"off",},overrides: [{files: ['**/__tests__/*.{j,t}s?(x)','**/tests/unit/**/*.spec.{j,t}s?(x)'],env: {jest: true}}]
}
School.vue 组件
<template><div class="demo"><h2>学校名称：{{ name }}</h2><h2>学校地址：{{ address }}</h2><button @click="showName">点我提示学校名</button></div>
</template><script>
export default {name: 'School',data() {return {name: "马朋帅",address: "成都",};},methods: {showName() {alert(this.name);}},
};
</script><style>
.demo {background-color: orange;}
</style>
App.vue
<template>
<!-- template里面必须先包一个div --><div><School></School><Student></Student></div>
</template><script>
// 引入组件
import School from './components/School.vue'
import Student from './components/Student.vue'export default {name:'App',components:{ School, Student }
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'// 阻止启动时的生成提示
Vue.config.productionTip = falsenew Vue({render: h => h(App), // 作用：把App组件引入到index.html中id为#app的div里面
}).$mount('#app')
vue.config.js （可以继续添加新的配置）
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true, //不用管默认就有lintOnSave: false // 关闭语法校验（自己配置）
})