一、语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="vue-app"> <p>{{name}}</p> <p> {{greet()}}</p> <p>{{aaaaaa}}</p> <p></p> <!--属性绑定--> <a v-bind:href="link">百度</a> <a :href="link">百度</a> <!--解析html标签--> <p v-html="tag"></p> <!-- <button @click="age++">加</button> --> <button v-on:click="age++">加</button> <button v-on:click="age--">减</button> <button v-on:click="add(5)">测试方法</button> <p>年龄：{{age}}</p> <!--双向数据绑定 只有 input/select/textarea--> <input type="text" v-model="name" /> <p> <!--通过ref vm.$refs.chengshi 获取input对象 通过对象可以获取vm.$refs.chengshi.value--> 城市 <input type="text" ref="chengshi"> </p> <div id="canvas" v-on:mousemove="updataXY" style=" 600px;height: 300px; border: 1px solid #333"> {{x}},{{y}} </div> <!--当一个属性变化时，包含属性的方法都会执行一遍 用计算属性computed 只有变化才监听--> <!-- v-show 相当于display:none v-if 整个标签都不存在 --> </div> </body> <script src="app.js"></script> </html>
/** * 全局组件，可以仔任何实例中使用 * <p>这是全局组件的内容{{name}}</p> */ Vue.component('mobanname1', { template: ` <div>这是全局组件的内容{{name}} <button @click='add()'>测试组件</button> </div> `, data() { return { name: "组件名" } }, methods: { add() { //组件条用的方法 } }, }); var one = new Vue({ el: '#vue-app', data() { return { title: null, users: [ { id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '王五' } ] } }, beforeCreate() { //实例还没有被创建，不知道data也不能watch 监听 alert("创建前"); }, created() { //实例创建完了，知道data也能watch，但是看不到页面 }, beforeMount() { //页面挂载前，render首次被调用 }, mounted() { alert("页面挂载了，这时可以看到页面的内容，也可以访问到DOM"); }, beforeUpdate() { alert("数据更新前"); }, updated() { alert("数据已经更新完毕,每次更改都会调用"); }, beforeDestroy() { alert("页面离开之前被调用，清除定时器，或者第三方的组件"); }, destroyed() { alert("实例被销毁"); }, }); /** * npm run serve * * 项目的启动和打包方式 * "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "scripts": { "dev": "vue-cli-service serve", "build": "vue-cli-service build" }, 除了start npm start 其余的都要 npm run dev 加run package-lock.json 没什么用 删掉也可以 babel.config.js es6,7编译配置 gitignore 打包是忽略的文件配置 引入项目 安装 node_modules npm install 会根据package.json 配置的模块进行安装node_modules中的依赖 * * */
cnpm install --ignore-scripts
new Vue({ el: '#vue-app', data() { return { name: "张三", link: "http://www.baidu.com", tag: '<a href="http://www.baidu.com">解析html</a>', age: 20, x: 0, y: 0 } }, methods: { // greet: function () { // return "aa" + this.name; // }, greet() { return "aa" + this.name; }, add(inc) { this.age += inc; }, updataXY(event) { this.x = event.offsetX; this.y = event.offsetY; } }, watch: { //监听name属性的变化 name(val, oldVal) { //val name的新值，oldVal原值 } }, computed: { //计算属性一定要有返回值 }, });
<script>
var app = new Vue({
el: "#app",
data: {
name: "张三",
age: 20,
a: 10,
b: 20,
flag: true
},
methods: {
add(name) {
//alert(name)
},
getAge() {
console.log(this.age);
},
addA() {
console.log("添加A");
return this.a;
},
addB() {
console.log("添加B");
return this.b;
}
}
});
//必须写在下边
//app.$data.name = "李四";
//alert(app.$data.name);
//alert(app.$data.person); //undefined
//v-model 双向数据绑定 有输入输出
//获取元素DOM 通过ref="age" 相当于id-"age" this.$refs.age 获取input
// watch: { //一般用作调试
// //监听name属性的变化
// name(val, oldVal) {
// //val name的新值，oldVal原值
// }
// },
//当属性变化时，页面中所有的绑定的该属性都会变化，如果method也有该属性,method也会被调用，比较变态
// 比如：<button v-on:click="a++">加a</button>
// <button v-on:click="b++">加b</button>
// {{addA()}}
// {{addB()}}
// addA() {
// console.log("添加A");
// return this.a + this.age;
// },
// addB() {
// console.log("添加B");
// return this.b + this.age;
// }
// computed: { //计算属性
// //计算属性一定要有返回值
//只会调用变化的，不变化的不调用
//一般应用经常变化的 如样式 搜索
// },
// v-if 条件为假 页面没有该元素 不是隐藏
</script>
一 vscode
插件
1.live server 热更新，更改代码后浏览器自动刷新
2.vetur vue 语法高亮
HTML Snippets
3.格式化
{
"workbench.colorTheme": "Default Light+",
"editor.formatOnType": true,
"editor.formatOnSave": true,
"files.associations": {
"*.ejs": "html",
"*.js": "html",
"*.vue": "html"
}
}
"editor.formatOnType": true,
"editor.formatOnSave": true
npm 升级
npm install npm -g
淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
Vue CLI 3需要 nodeJs ≥ 8.9
cnpm install -g @vue/cli
npm install @vue/cli -g
创建项目
vue create <Project Name> //文件名 不支持驼峰（含大写字母）
安装项目依赖
npm install vue-cli
创建2.x版本
npm install -g @vue/cli-init
vue init webpack my-project
安装 less
cnpm install --save less
cnpm install --save less-loader
<style scoped lang='less'>
cnpm install --save axios
<template> <!-- hmtl结构只能有一个根标签 --> <div id="app"> <HelloWorld msg="Welcome to Your Vue.js App"/> <Users username="传递用户名"></Users> <h1>app</h1> </div> </template> <script> /* 1样式，因为页面从上到下加载，越往下的子组件会覆盖所有样式 <style scoped> 如果子组件添加scoped只在该子组件中生效， 原理data-v-哈希值 2在main.js注册全局组件，在哪都能用 全局组件一般很少用，一个地方修改，所有的引用该组件的地方都会修改 import Users from './components/Users' Vue.component('users',Users) Vue.config.productionTip = false 3组件传值，从父组件往子组件中传值 <Users username="传递用户名"></Users> props:["username"], //接多个参数 * props:{ * users:{ * type:Array, * required:true//属性必填 * } * } //获取this.username data(){ // name:this.username, return{ name:this.username } } 属性传值 （1）传值 （2）传引用 子组件中不建议修改父组件中的属性 通过注册事件修改父组件中的属性 4 solt 占位 <Users username="传递用户名"><h1></h1></Users> 在子组件中显示h1标签 <h1 slot="title"></h1> <slot name="title"></solt> 占位 传递标签样式问题 一般在<Users username="传递用户名"><h1></h1></Users>中写样式 <h1>{{title}}</h1>在父标签中写title 5 动态组件 显示哪个组件 <component :is="component"></component> <button @click="component='form-one'">显示组件1</button> <button @click="component='form-two'">显示组件2</button> data(){ retrun{ component:"form-two" } } <keep-alive> <component :is="component"></component> </keep-alive> 将组件缓存，不会重复加载页面，默认不缓存重新加载页面
动态组件虽然不显示 但是也加载
异步组件
import Users from './components/Users'
const Users =() => import('./components/Users')
处理边界
读取根属性，main.js 中的data,和调用方法，修改值
this.$root.mess
读取父级
this.parent.mess
读取子组件
this.$ref
自定义指令
1、全局自定义指令
2、局部指令
如果想注册局部指令，组件中也接受一个 directives 的选项：
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：
<input v-focus>
一般指令都会单独放到一个js中
import Vue from "vue"
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
} })
在组件中引入 js 所在的目录
过滤器
{{mess|filter}}
6创建环境变量 在项目根目录创建.env文件 生产环境 .env.development 开发环境 定义变量 VUE_APP_URL=http://www.baidu.com/api 在vue中获取 process.env.VUE_APP_URL 7vue ui框架 vuetify 8 vue ui 图形化创建vue项目 9 vue 配置文件 在根目录创建 vue.config.js module.exports = { baseUrl:'/', //根路径 outputDir:"dist",//构建输出目录 assetsDir:"assets",//静态资源目录(js,css,img,fonts), lintOnSave:false,//是否开启eslint检测 true false 'error' devServer:{ open:false, //是否自动弹页面 host:"localhost", port:8081, https:true, hotOnly:false,//热更新 proxy:{ //配置跨域 '/api':{ target:"http://localhost:5000/api", ws:true, changOrigin:true, pathRewrite:{ '^/api':'' } } } } } */ import HelloWorld from './components/HelloWorld.vue' //局部组件 import Users from './components/Users' export default { name: 'App', components: { //局部组件需要注册，也可以users:Users，名称不能和标签名重名比如head:head HelloWorld, Users } } </script> <style> h1{ color: blue; } </style>