Vue和Element的使用

1.Vue使用步骤

1. 新建HTML页面，引入Vue.js文件

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

2. 在js代码区域，创建Vue核心对象，进行数据绑定

   //创建Vue核心对象
       new Vue({
           el:"#app",
           data(){
               return {
                   username:"",
               }
           }
       });
   

3. 编写视图

   <div id="app">
       <input v-model="username">
   <!--    插值表达式-->
       {{username}}
   
   </div>
   

2.Vue常用指令

指令	作用
v-bind	为HTML标签绑定属性值，设置href，css样式等
v-model	在表单元素上创建双向数据的绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为TRUE时渲染
v-else	条件性的渲染某元素，判定为TRUE时渲染
v-else-if	条件性的渲染某元素，判定为TRUE时渲染
v-show	根据条件展示某元素
v-for	列表渲染，遍历容器的元素或者对象的属性

<div id="app">
    <input v-model="username">
<!--    插值表达式-->
    {{username}}
    <a v-bind:href="url">点击</a>
    <input v-model="url"><br>
    <input type="button" value="点一下" v-on:click="show()"><br>

    <div v-if="count==1">张嘉圣杰</div>
    <div v-else-if="count==2">张飘飘</div>
    <div v-else>郭少</div>
    <input v-model="count">
    <br>

    <div v-show="count==1">div-show</div>
    <br>
    <br>
    <div v-for="(address,i) in addresses">
        {{i+1}}---{{address}}<br>
    </div>

</div>

<script src="js/vue.js"></script>
<script>
    //创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://www.baidu.com",
                count:"1",
                addresses:["河北","广西","北京"]
            }
        },
        methods:{
            show(){
                alert('我被点了');
            }
        },
        mounted(){
            alert('加载完成。。。。。。');
        }

    });
</script>

3.Vue生命周期

• 生命周期的八个阶段，每触发一个生命周期事件，会自动执行一个生命周期方法

  状态	阶段周期
  beforeCreate	创建前
  created	创建后
  beforeMount	载入前
  mounted	挂载完成
  beforeUpdate	更新前
  updated	更新后
  beforeDestroy	销毁前
  destroyed	销毁后

• mounted(){
              alert('加载完成。。。。。。');
          }
  

• mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。发送异步请求，加载数据

4.Element的使用

1. 引入Element的css、js和Vue.js

   <script src="js/vue.js"></script>
   <script src="element-ui/lib/index.js"></script>
   <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
   

2. 创建Vue核心对象

   <script>
       new Vue({
           el:"#app"
       })
   </script>
   

3. 到Element官网查找需要的组件代码并复制

4. 更改成自己想要的效果