Vue&Element-UI

1. Vue

1.1 MVVM模型

数据和页面分离。数据一旦改变，页面自动跟着变.

1.1.1 Vue入门

 <!-- 1.引入vue -->
    <script src="js/vue.js"></script>

   <!-- 2.准备一个区域,让vue进行接管 -->
    <div id="app">
        <!-- 和vue交互的页面都要在这个标签内部 -->
        <!-- {{差值表达式}} -->
        <h1>{{msg}}</h1>
        <hr>
        {{code == 1 ? "启用" : "禁用"}}
    </div>

    <!-- 3.创建vue对象,接管app区域 -->
    <script>
        new Vue({
           el:"#app" ,//让vue去接管 id值是app的标签
           //data里面写的是定义的数据
           data:{
            msg:"hello vue!!!",
            code:1
           }
        })
    </script>    

1.2 Vue指令

1.2.1 v-bind

 <div id="app">
        <!-- 
            v-bind      => 绑定属性的
            需要定义好对应的变量
            我们需要在设置变量的属性上 v-bind:属性="变量名"
            v-bind:属性="变量名" 可以简写   :属性="变量"
        -->
        <a v-bind:href="website">点我访问网站</a>
        <font v-bind:color="ys">这是一段内容</font>
        <img :src="imgPath"/>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                //定义数据的地方
                website: "http://www.itheima.com",
                ys:"green",
                imgPath:"https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?pid=ImgDet&rs=1"
            }
        })
    </script>

1.2.1 v-if

<!-- 2.准备一个区域,让vue进行接管 -->
    <div id="app">
        <!-- v-if 用来做判断的
            符合条件的会显示
            不符合条件的不会出现(渲染)
            
        -->
        <span v-if="score > 90">
            成绩优秀
        </span>
        <span v-else-if="score > 70">
            成绩中等
        </span>
        <span v-else>
            成绩垃圾
        </span>
    </div>

    <!-- 3.创建vue对象,接管app区域 -->
    <script>
        new Vue({
           el:"#app" ,//让vue去接管 id值是app的标签
           //data里面写的是定义的数据
           data:{
                score:75
           }
        })
    </script>    

1.2.3 v-show

 <!-- 2.准备一个区域,让vue进行接管 -->
    <div id="app">
        <!-- 
            v-if 和 v-show 都可以控制标签的隐藏和显示
            v-if 是根据结果来决定是否渲染标签
            v-show 是同过display样式来决定标签是否显示
         -->
        <span v-show="flag">
            成绩优秀
        </span>
        
    </div>

    <!-- 3.创建vue对象,接管app区域 -->
    <script>
        new Vue({
           el:"#app" ,//让vue去接管 id值是app的标签
           //data里面写的是定义的数据
           data:{
                flag:false
           }
        })
    </script>    

1.2.4 v-html&v-text

 <!-- 2.准备一个区域,让vue进行接管 -->
    <div id="app">
        <!-- innerHTML 加在属性上的 -->
        <div v-html="content"></div>
        <!-- innerText 加在属性上的
            说白了和 {{content}} 展示的效果是一样的
        -->
        <div v-text="content"></div>
    </div>

    <!-- 3.创建vue对象,接管app区域 -->
    <script>
        new Vue({
           el:"#app" ,//让vue去接管 id值是app的标签
           //data里面写的是定义的数据
           data:{
                content:"<b>aaa</b>"
           }
        })
    </script>    

1.2.5 v-on

 <!-- 2.准备一个区域,让vue进行接管 -->
    <div id="app">
        <!-- 
            任务需求:
                点击按钮,在div中显示内容
                '这个div在按钮点击后显示了内容'

            v-on:事件="函数名" 可以简写 @事件
         -->
        <button v-on:click="showContent()">点我啊</button>
        <button @click="showContent()">点我啊</button>
        <div v-html="content"></div>
    </div>

    <!-- 3.创建vue对象,接管app区域 -->
    <script>
        new Vue({
           el:"#app" ,//让vue去接管 id值是app的标签
           //data里面写的是定义的数据
           data:{
                content:""
           },
           //在methods中写函数
           methods:{
            showContent(){
                //如果我们需要访问data中定义的数据
                this.content = '<font color="red">这个div在按钮点击后显示了内容</font>';
            }
           }
        })
    </script>    

1.2.6 v-for

    <!-- 2.div给vue -->
    <div id="app">
        <!-- v-for 遍历
            item in 数组    =>  item 表示的是数组中的每个元素
        -->
        <div v-for="item in arr">
            <h1>{{item}}</h1>
        </div>
    </div>

    <!-- 3.初始化vue -->
    <script>
        new Vue({
            el:"#app",
            data:{
                //数据
                arr:['aaa','bbb','ccc']
            },
            methods:{
                //函数
            }
        })
    </script>

1.2.7 v-model

    <!-- 2.div给vue -->
    <div id="app">
      <!-- v-model 
            作用 : 表单的双向绑定
            只能用在表单上
      -->
      <input type="text" v-model="username"><br>
      <input type="password" v-model="password"><br>
      <button @click="login">点我登陆</button>
    </div>

    <!-- 3.初始化vue -->
    <script>
        new Vue({
            el:"#app",
            data:{
                username:"tom",//此时我们的username记录是表单框输入的内容
                password:"123456"
            },
            methods:{
                //函数
                login(){
                    alert(this.username + " ==== " + this.password)
                }
            }
        })
    </script>

1.3 Vue生命周期

• 创建前
• 创建后 created(){} => window.onload = function(){}
• 挂载前
• 挂载后 mounted(){} => window.onload = function(){}
• 更新前
• 更新后
• 销毁前
• 销毁后

注意： created和mounted这类方法被称为钩子函数，使用中选择一个来用就可以

<div id="app">
        {{msg}}
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"hello vue"
            },
            methods:{
              
            },
            created(){
                alert('1')
            },
            mounted(){
                alert('2')
            }
        })
    </script>

2. Element-UI

2.1 步骤

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

2.2 Element-UI网址

Element-UI

直接进去采用cv大法！