vue基础入门探讨

简单来说：Vue是当下很火的一个JS库&框架

这里谈到的库也就是一些属性方法的集合，按需调用，框架也就是业务的一套解 决方案（N个库的集合），它制定了统一的开发规范
真正意义上它解决了前后端分离便于开发和后期维护

学过vue跟JQ的都应该了接一下它们的优缺点

1-JQ有大量的DOM操作，vue有一个概念虚拟DOM 就是直接去内存中取 2-JQ没有统一模型不方便后期维护，vue是基于mvvm思想
数据统一管理在模型汇总 3-JQ有语法可以提取公共的html或js吗？vue有组件 vue可以减少代码冗余便于后期维护 等

小项目 jq 总共2、3个页面 用vue大材小用，关键得不偿失浪费时间 大项目 vue 后期方便维护
成本高，对技术要求也高（通过上述3点可以看到）

初体验

模板语法

<div id="app">
        <p>你猜我叫什么？	答： {{uname}}	</p>							
        <p>你猜我今年多少岁？答：  {{age}}	</p>							
        <p> 哥哥你年龄太大了，我要你回到18岁，实现age-870 代码：{{age-870}}	 </p>
        <p>姓名反转显示，代码：	{{uname.split('').reverse().join(',')}}	</p>				
        <p>
            姓名等于悟空超厉害，否则八戒还得努力呀！代码：
            {{ uname == '悟空' ? '超厉害' : '八戒还得努力'}}
        </p>	
        <p> 声明a标签href中的值使用模型数据url</p>
        <p>
            <!-- <a href="{{url}}">点击我，加薪</a> -->
            <a v-bind:href="url">点击我，加薪</a>
            <a       :href="url">点击我，加薪</a>
        </p>
        <p>声明button按钮，点击弹出：hello</p>
        <input type="button" value="点我" v-on:click="fn1">
        <input type="button" value="点我" @click="fn1">
        <hr /><hr />
        <p>显示模型中的html键（逻辑上）： {{html}}</p>
        <p v-html="html"></p>
        <!-- 注：用v-html数据会放到标签里面 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1创建VM
new Vue({
    //声明监控访问
    el: '#app',
    //2创建模型 
    data: {
        uname:'千爸爸',
        age: 888,
        url: 'http://www.mobiletrain.org/',
        html: '<b>你好呀</b>'
    },
    methods: {//这里写对象 因为要写多个方法
        // 键就是函数名
        // fn1:function(){}
        // fn1:()=>{}   es6  箭头函数
        // fn1(){}      es6  对象 属性和方法的简写
        fn1() {
            alert('hello，webopenfather')
        }
    }
})
</script>

列表渲染

<div id="app">
    <h1> v-for="数据 in data中键"</h1>
    <p v-for="item in goods">
        {{item.id}} __ {{item.title}}
    </p>

    <h1>v-for="(数据,  索引/下标) in data中键" </h1>
    <p v-for="(item, index) in goods">
        {{index}} __ {{item.id}} __ {{item.title}}
    </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    // 声明监控范围
    el: "#app",
    // 声明模型数据
    data: {
        goods: [
            {id: 1, title:'a', price: 12},
            {id: 2, title:'b', price: 13},
            {id: 3, title:'c', price: 14},
            {id: 4, title:'d', price: 15}
        ]
    }
})
</script>

条件渲染v-if和v-show

<div id="app">
    <h1>v-show</h1>
    <div v-show="status">this is v-show</div>
    
    <h1>v-if</h1>
    <div v-if="status">this is v-if</div>
    <div v-if="score >= 90">优秀</div>
    <div v-else-if="score >= 80">一般</div>
    <div v-else-if="score >= 70">良好</div>
    <div v-else-if="score >= 60">及格</div>
    <div v-else-if="score >= 0">不及格</div>
    <div v-else>你有BUG</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    // 声明监控范围
    el: "#app",
    // 声明模型数据
    data: {
        status: false,
        // 需求2：判断成绩>=90优秀>=80一般>=70良好>=60及格>=0不及格，其他不行
        score: 5
    }
})
</script>

这里的show和if的区别是：v-if控制DOM 移除标签，v-show控制css隐藏显示，并且v-if语法更强 else if 和 else

<button @mousemove="eventAction"></button>
<button @mousemove="eventAction(0, $event)"></button>
methods: {
    eventAction(ev){

    }
    eventAction(num, ev){

    }
  }

如果@事件类型="函数名"中函数不传参数的话会传入一个内置的事件对象，如果函数中传参的话就会传入一个参数num，有需要获得事件对象的话可以在后面加入$event传入进来

事件修饰符

按键修饰符
@事件类型.修饰符=“函数名”
修饰符种类：delete、enter、space等 也可以写数字

<div id="app">
    <input 
        type="text" 
        @keyup.enter="fn1"
        @keyup.space="fn2"
        @keyup.delete="fn3"
    />
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    // 声明监控范围
    el: "#app",
    // 声明模型数据
    data: {
    },
    // 声明普通方法
    methods: {
        fn1() {
            console.log('this is enter')
        },
        fn2() {
            console.log('this is space')
        },
        fn3() {
            console.log('this is delete')
        }
    }

})
</script>