VUE安装配置和其生命周期

安装vsCode

可以看一下视频跟着安装
https://www.bilibili.com/video/BV1GV411Z7si?p=1

vue生命周期

vue基础 一个简单的vue和html配合使用的示例（拷贝并不能直接使用）

html示例

<div id="app-5">
        <h1>5.计数器</h1>
        click中可以输入直接运行的代码，但是复杂情况不建议这样写，逻辑很容易被忽略也不美观
        <p v-html=number>{
   
   {message}}</p>
        <button v-on:click="number++">
            +
        </button>
        <button v-on:click="number--">
            -
        </button>
    </div>

vuejs示例

var 变量名 = new Vue({
        el:"#id",//dom节点位置
        data:{//数据位置
            message:"vue数据中的message",
            list:["刘","关","张","赵","黄"],
            list1:[
                {'name':"name-1","age":12},
                {'name':"name-2","age":13},
                {'name':"name-3","age":14},
                {'name':"name-4","age":15},
            ]
        },
        computed:{
            //计算属性，也是定义function计算方法的地方
        },
        methods:{
             //自定义的事件的地方  
            buttonClick:function(){
                 
            }
        },
        watch: {
        //数据改变观察者数据改变时会调用此方法
            message(newName, oldName){
                console.log(newName+":::"+oldName);
            }
        }
    })

VSCode设置

vsCode代码片段设置

    "Print to console": {
        "prefix": "vueFragment",//快捷输入前缀
        "body": [//生成的代码 $0 为代码段生成后光标所在位置 $1 为占位符；
            "<div id='app'>",
            "   {
   
   {message}}",
            "</div>",
            "<script>",
            "   var app = new Vue({",
            "       el:'#app',",
            "       data:{",
            "           message:'Hello!'",
            "       }",
            "   })",
            "</script>",
            "$0 $1"
        ],
        "description": "vue bean item"//说明
    }

安装node

直接在官网下载并且配置好环境变量即可（其中自带npm）

npm编译

先设置国内镜像
npm config set registry http://registry.npm.taobao.org
再次编译 npm i

github 例子地址

https://github.com/1142235090/study_vue