Vue入门学习（一）

Vue 入门

Vue 框架是现在国内比较流行的前端开发框架，现在国内常用的前端开发流程大概是UI使用饿了么UI，交互使用Vue框架，使用ES6规范开发，使用Node.NPM指令，使用webpack打包，使用easy mock进行接口数据测试。

Vue 引包

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

开发包使用vue.js，该包包含了所有vue的开发环境

Vue 启动

Vue 有三个必要对象

el

el是发生行为的目的地

template

装载的模板

data

动态数据的声明

    <script>
        new Vue({
            el:'#app',
            template:'<div><h1>大家好 {
  {text}}</h1></div>',
            data:function() {
                return {
                    text: 'hello vue'
                }
            }
        })
    </script>

插值表达式

• { { 表达式 }}

表达式包含：对象、字符串、判断后的布尔值、三元表达式

Vue 指令

Vue 指令都是以v-xxx的形式表示，就是html页面的属性

    <div v-xxx> </div>

常用的Vue的指令

• v-text: 元素的innerHtml属性，必须是双标签
• v-html 元素的innerHtml属性
• v-if 判断是否插入元素
• v-else-if
• v-else
• v-show 隐藏元素，如果确定要隐藏，会给元素的style添加display:none样式

<div id="app"></div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            template:`
            <!--必须要有一个根节点-->
                <div>
                    <span v-text="myText"></span>
                    <hr>
                    <span v-html="myHtml"></span>
                    <hr>
                    <button v-if=" num == 1 ">测试v-if</button>
                    <button v-else-if=" num == 2 ">测试v-else-if</button>
                    <button v-else>测试v-else</button>
                    <hr>
                    <button v-show="isShow">测试v-show</button>
                </div>
            `,
            data:function() {
                return {
                    myText: '我是v-text的值',
                    myHtml: '<h2>我是一个链接</h2>',
                    num: 1,
                    isShow: false
                }
            }
        })
    </script>

v-bind

给元素的属性赋值，可以给已存在的属性赋值，也可以给自定义的属性赋值,单项数据流，数据是从vue到页面的单项数据流

    <div v-bind:原属姓名="变量"</div>
    <!-- 简写 -->
    <div :原属姓名="变量"</div>

v-on

可以处理自定义原生事件，给按钮添加click并让使用变量的样式改变

<div id="app"></div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            template:`
            <!--必须要有一个根节点-->
                <div>
                    <span v-text="myText"></span>
                    <hr>
                    <span v-html="myHtml"></span>
                    <hr>
                    <button v-if=" num == 1 ">测试v-if</button>
                    <button v-else-if=" num == 2 ">测试v-else-if</button>
                    <button v-else>测试v-else</button>
                    <hr>
                    <button v-show="isShow">测试v-show</button>
                </div>
            `,
            data:function() {
                return {
                    myText: '我是v-text的值',
                    myHtml: '<h2>我是一个链接</h2>',
                    num: 1,
                    isShow: false
                }
            }
        })
    </script>

v-model

双向数据流绑定=》页面改变影响内存，内存改变影响页面

<div id="app"></div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            template: `
                <div>
                    <input type="text" v-model="myValue" />
                    <button v-show="myValue === 'xxx'">hha</button>
                </div>
            `,
            data: function() {
                return {