Vue笔记-Day01

最新推荐文章于 2024-08-14 20:13:10 发布

爱吃饭的阿强

最新推荐文章于 2024-08-14 20:13:10 发布

阅读量88

点赞数

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

本文链接：https://blog.csdn.net/weixin_57155307/article/details/122063317

版权

vue\ 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Vue的特点：

1.采用组建化模式，相当于一个.vue文件就是一个组件，提高代码的服用率;利于维护。
2.声明式编码，无需直接操作DOM，提高开发效率；
DOM：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
3.使用虚拟DOM+Diff算法，尽量复用DOM节点。

官方文档：
https://cn.vuejs.org/

1.0 初识Vue

1.想让Vue工作，就必须创建一个Vue实例，并且要传入一个配置对象。
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
3.root容器里的代码被称为[Vue模板]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/vue.js" type="text/javascript"></script>
    <title>Hello Vue</title>
</head>
<body>
    <div id="root">
        <h1>Hello {{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false

        //Vue instance
        new Vue({
            // el:document.getElementById('root') the same
            el:"#root",//让id为root的容器和Vue绑定
            data:{
                name:'Vue2'
            }
        })

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

注意事项：

（1）容器和Vue实例之间是1对1的关系；
（2）{{ }}中可以存js表达式或js代码；
js表达式：一个表达式会生成一个值，可以发那该在任何一个需要值的地方。
（3）data中的数据发生改变，那么模板中用到该数据的地方也会自动更新。

1.1 模板语法：

Vue的模板语法有两大类：
1.插值语法：
用于解析标签体的内容
如：{{ XXX }}，XXX是js表达式
2.指令语法：
用于解析标签（如：标签属性，标签体内容，绑定事件）
如：v-bind:href=“XXX” 等同于 :href=“XXX”

Vue中的许多指令都是v-xxx，如v-bind；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Module</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>hello,{{name}}</h1>
<!--        v-bind: == :         -->
<!--        <a v-bind:href="url" v-bind:x="hello">click me to baidu</a>-->
        <a :href="url" :x="hello">click me to baidu</a>

    </div>
    <script type="text/javascript">
        new Vue({
            el:"#root",
            data:{
                name:'jack',
                url:'http://www.baidu.com',
                hello:'hello'
            }
        })
    </script>
</body>
</html>

1.2 数据绑定：

V-bind: 单向绑定，数据只能从data输出到页面
V-model:双向绑定，页面和data的绑定

注：双向绑定一般只作用在表单类元素上，v-model:value可以简写为v-model,value是默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bind</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <p>单向数据绑定:</p><input type="text" v-bind:value="name">
        
        <p>双向数据绑定:</p><input type="text" v-model="name">    
        <p>双向数据绑定:</p><input type="text" v-model:value="name">
    </div>

    <script>
        new Vue({
            el:"#root",
            data:{
                name:'Vue'
            }
        })
    </script>

</body>
</html>

1.3 el和data：

el的两种写法
其中，第二种操作更灵活；

<div id="root">
        <h1>{{name}}</h1>
    </div>

    <script type="text/javascript">
        const v = new Vue({
            //el:'#root',第一种
            data:{
                name:'Vue'
            }
        })
        v.$mount('#root')//第二种
    </script>

data的两种写法：

    <script type="text/javascript">
        const v = new Vue({
            el: '#root',
            //对象式
            // data: {
            //     name: 'Vue'
            // }
            
			//函数式
            data:function (){  //可以简写为data(){
                return{
                    name:'Vue'
                }
            }

        })
    </script>

1.4 理解MVVM：

在这里插入图片描述
MVVM包含三个部分，分别是view,viewmodel和model。
view负责展示，model负责管理。相当于一个前台一个后台。在中间由Vue组成viewmodel，viewmodel的主要功能有两个，Data Bindings负责数据的绑定，类似于V-bind，DOM Listeners 负责监听View的变化，类似于双向绑定V-model；

**在Vue中，一个模板便可以当成一个view,如：

<div id="root">{{name}}</div>

一个Vue实例对象就是一个viewmodel,Vue实例对象中的data就是一个model。
model中的数据最终会来到Vue实例中，我们通过 {{ }} 的方式，可以取出任何Vue实例也就是vm中的数据。**

爱吃饭的阿强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue笔记-Day01

Vue的特点：1.采用组建化模式，相当于一个.vue文件就是一个组件，提高代码的服用率;利于维护。2.声明式编码，无需直接操作DOM，提高开发效率；DOM：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。3.使用虚拟DOM+Diff算法，尽量复用DOM节点。官方文档：https://cn.vuejs.org/1.0 初识Vue1.想让Vue工作，就必须创建一个Vue实例，并且要传入一个配置对象。2.root容器里的代码依然符合html规范，只不
复制链接

扫一扫

专栏目录