vue--知识点

 

一、语法

<!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>










 




 





        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/jentary/p/11674662.html