vue.4

首先我们使用vue时首先得在js中引入vue.js文件

<script src="./vue.js"></script>

引入成功后可以先测试引入是否成功
HTML代码

<div id="app">
        {{message}}
    </div>

js代码

 var app =new Vue({
        el:`#app`,
        data:{
            message:`**`
        }
    })

1.容器 ，app容器名称**，注：容器名称尽量使用id绑定唯一值**
2.{{}}插值语法(Vue使用语法)
3. el绑定容器（还可以使用$.mount()绑定容器）
提醒

 Vue.config.productionTip = false;
 可以阻止VUE在启动时产生的提示

v-bind:动态绑定属性简写英文的：

html代码：

 <div id="app">
            <a href="http://www.baidu.com">访问百度</a>
            <!-- v-bind:动态绑定属性 -->
            <a v-bind:href="abc" v-bind:class="a">vue方法访问vue官网</a>
    </div>

js代码：

 var vm = new Vue({
        data() {
            return {
                userName:"王五",
                abc:"https://v2.cn.vuejs.org/v2/guide/syntax.html",
                a:"box1"
            }
        },
    })
    vm.$mount("#ips");
    // 绑定容器的2种方式
    // 1.el绑定:"容器id或class等"
    // 2.Vue实例.$mount("容器id或class等"),注：一定写在最后

v-on:事件 == @事件（ 绑定事件）

html:

 <div id="app">
        <button v-on:click="func1(1)">点击1</button>
        <button @click="func1(2)">点击2</button>
        <h1 :class="sty">我现在点击的是{{num}}</h1>
        <h1 :style="boss[0]">绑定样式style</h1>
    </div>

js:

 var vm = new Vue({
        // el:"#app",
        data(){
            return{
                userName:"张三",
                num:"",
                sty:"",
             
                boss:[
                    {
                        border:"5px solid pink"
                    },
                    {
                        color:"red"
                    }
                ]
            }
        }

methods处理的函数方法

  methods: {
            func(){
                console.log(2);
                return 1111111;
            },
            func1:function(user){
                if(user==1){
                    this.num = 1;
                    this.sty = "box1";
                    console.log(222222222);
                }else {
                    this.num = 2;
                    this.sty = "box2"
                    console.log(2);
                }
            },
            func2(){
                this.num = 2;
                this.sty = "box2"
                console.log(1);
            }
        },
    })
    vm.$mount("#app");