初识Vue(1)

首先我们使用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(1111111);
                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(333333333);
                }
            },
            func2(){
                this.num = 2;
                this.sty = "box2"
                console.log(333333333);
            }
        },
    })
    vm.$mount("#app");

vue 数组循环
v-for遍历数组语法：v-for=“(item,index) of arr” :key=“item”;
其中item是数组中的每一个值，index则是下标；
vue 对象便利对象
v-for=“(item,index)of obj” :key=“item”
其中item是键名，index是键值；
条件渲染-------v-if(条件)，v-else-if(条件)，v-else
v-if,如果值为ture，那么他将会进行下一阶段，如果值为false，他就会停止。

<h1 v-if="x">00</h1>
x的值为ture/false

注：v-else-if和v-else使用前都需要有v-if存在否则会报错（基础原理和javascript一样；
特别注意：使用v-for和v-if时，v-if和v-for不要在同一集，解决方法：拿一个div包住v-if.
例：

  <div v-if="Array.isArray(item)">
      <button v-for="(item,index) of item":key="index+index" @click="fun2()">
             {{item}}
         </button>
  </div>