vue入门

vue特性介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
可以一点一点地使用它，只用一部分，也可以整个工程都使用它
js的框架，跟jq是一类东西
bootstrap：ui框架不是js框架（css样式）
vue中使用ui可以引入bootstrap，elementui(饿了么团队出的)，Vant(移动端ui：有赞)，ant-design-vue（ant-design本身是react的ui库）

版本

-主流：2.x
-最新：3.x
# 官方有教程：https://cn.vuejs.org/v2/guide/

mvvm思想

Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中，js中变量
View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）
以后不需要显示的使用dom操作，jquery的作用就不大了

组件化开发，单页面开发

-vue项目---》index.html页面---》看到的变化，都是组件的切换
-页面组件--》放了小组件
-在index.html中替换 组件，就实现页面的变化

 

快速使用vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app" class="div_cls">
<h1>我的名字是：{{name}}</h1>
    <input type="text" v-model="text">
    <hr>
    {{text}}
</div>

</body>
<script>
    // div(不一定是div) 被vue托管了，在div内部，就可以使用vue的语法：模板，指令系统
    var vm =new Vue({
        // el:"#app",
        el:".div_cls",
        data:{
            name:"lqz",
            text:""
        }
    })
</script>
</html>

 

模板语法之插值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>用两个大括号包裹的叫插值,可以写js代码</h1>
<h3>{{name}}</h3>
    <h3>{{age}}</h3>
    <h3>{{list1}}</h3>
    <h3>{{list1[0]}}</h3>
    <h3>{{obj1.name}}</h3>
    <h3>{{link1}}</h3>
    <h3>{{1==1}}</h3>
    <h3>三目运算符：{{10>20?'是':'否'}}</h3>
</div>

</body>
<script>
    var vm =new Vue({
        el:"#app",
        data:{
            name:"lqz",
            age: 18, // 数值
            list1: [1,2,3,4],   // 数组
            obj1: {name: 'lqz', age: 19}, // 对象
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
        }
    })
</script>
</html>
# 插值可以放变量和少量js代码
 

 

指令系统之文本指令

v-xx属性都是vue的指令系统

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>文本指令--v-html-->会把变量的值渲染到标签中,如果字符串是标签，显示标签的样子</h1>
    <p v-html="name"></p>
    <p v-html="link1"></p>
    <h1>文本指令--v-text-->会把变量的值渲染到标签中,如果字符串是标签，不会是标签，字符串原样显示</h1>
    <p v-text="name"></p>
    <p v-text="link1"></p>

    <h1>文本指令--v-show-->控制标签是否显示:true和false，其实在页面中，但是不现实display:none</h1>
    <div v-show="show">
        我是div
    </div>
    <h1>文本指令--v-if-->控制标签是否显示:true和false，真正的标签不存在了，dom操作，性能低</h1>
    <div v-if="show1">
        我是div222
    </div>

</div>

</body>
<script>
    var vm =new Vue({
        el:"#app",
        data:{
            name:'lqz',
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
            show:true,
            show1:true,
        }
    })
</script>
</html>

 

指令系统之事件指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    <button v-on:click="handleClick">点我显示隐藏下面的div</button>-->
    <button @click="handleClick">点我显示隐藏下面的div</button>
    <div v-if="is_show">
        我是div
    </div>

</div>

</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            is_show: true,

        },
        methods: {
            handleClick() {
                // 把show的值取反,this代指vue对象，vm对象
                this.is_show = !this.is_show
            }
        }
    })
</script>
</html>

ps：v-on:click='xx'，v-on: 可以简写成 @ +事件名='xx'

posted @ 2022-04-12 20:41  椰子皮0oo0  阅读(41)  评论(0)    收藏  举报
1