Hello Vue

123小步

已于 2022-05-19 18:20:09 修改

阅读量514

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-05-19 18:19:13 首次发布

本文链接：https://blog.csdn.net/abc98526/article/details/124840413

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.什么是Vue?

Vue 是一套用于构建用户界面的渐进式JavaScript框架。
Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层(html+css+js)
与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用

css预处理器:

css预处理器定义了一门新的语言,其基本思想是,用一门专门的编程语言为css增加一些编程特性,将css作为目标生成文件,然后开发者就只需要用这种语言对css进行目标编码工作,通俗来说就是"用一门专门的编程语言进行web页面样式设计,在通过编译器转换为正常的css文件,以供项目使用".

常用的css预处理器:

SASS:基于Ruby,通过服务端处理,功能强大.解析效率高。需要学习Ruby语言,上手难度高于LESS。
LESS:基于Node.js,通过客户端处理,使用简单,功能比SASS简单,解析效率也低于SASS但是在实际开发中却足够了.

NPM：管理工具,类似于Maven！

2.第一个Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- View(视图)层 -->
<div id="app1">
    {{message}}
</div>

<!-- 导入Vue -->
<script src="https://lib.baomitu.com/vue/0.12.16/vue.js"></script>
<script>
    var vm1 = new Vue({
        el: "#app1",
        //Model层
        data: {
            message: "hello Vue!"
        }
    });
</script>
</body>
</html>

这里出现了View和Model那Vm在那哪里呢?

Vue是双向绑定的,并且监听,如果js的值发生了变化那么引用这个值的View层也会发生变化如:

回车后:

3.Vue基本语法

我们已经成功的完成了第一个vue程序,而vue却远远不止这些,如果不想使用{{}}来调用js中的属性则可以使用这种方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- View(视图)层 -->
<div id="app">
    <!--  v-bind:title是vue的指令  -->
    <span v-bind:title="message">
        鼠标悬停几秒
    </span>
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>

    var vm = new Vue({
        el: "#app",
        //Model层
        data: {
            message: "hello Vue! 当前时间" + new Date()
        }
    });
</script>
</body>
</html>

所看到的 v-bind：被称为指令,指令带有前缀v- 以此来表示他是vue的特殊特性,在这里表示他们会渲染DOM的特殊表示行为,如果在js中进行更改,那么页面上的message也会同时更改！

如for循环指令:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>

<div id="app" >
    <li v-for="(item,index) in items">
        {{item.message}}--{{index}}
    </li>
</div>
<script>
    var mv=new Vue({
        el:"#app",
        data:{
            items:[
                {message:"小步爱看书"},
                {message:"小步爱说话"}
            ]
        }
    })
</script>
</body>
</html>

if标签指令:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span v-if="fraction>=90">聪明</span>
    <span v-if="fraction>=60">及格了</span>
    <span v-if="fraction<60">继续加油!</span>
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            fraction:80
        }
    });
</script>
</body>
</html>

4.Vue绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <label>
        <!-- 绑定点击事件! -->
        <button v-on:click="sayHi">点击我</button>
    </label>
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //函数必须写在methods中!
        methods: {
            sayHi: function () {
                alert("点击了!");
            }
        }

    });
</script>
</body>
</html>

5.双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <input type="text" v-model="massage">
    输入的内容:{{massage}}
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            massage:""
        }

    });
</script>
</body>
</html>

6.组件

组件可以使我们自定义的标签合法化如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <xiaobu v-for="item in items" v-bind:xiao="item"></xiaobu>
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    Vue.component("xiaobu",{
        props:['xiao'],
        template:'<li>{{xiao}}</li>'
    })

    var vm = new Vue({
        el: "#app",
        data:{
            items:['java','php','c#','c']
        }
    });

</script>
</body>
</html>

组件无法之间进行绑定！需要props进行接收值来绑定接收！

123小步

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Hello Vue

1.什么是Vue?Vue 是一套用于构建用户界面的渐进式JavaScript框架。 Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层(html+css+js) 与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用css预处理器:css预处理器定义了一门新的语言,其基本思想是,用一门专门的编程语言为css增加一些编程特性,将css作为目标生成文件,然后开发者就只需要用这种语言对css进行目标编码工作,通俗来说就是"用一门专门的编程语言进行we.
复制链接

扫一扫