【VUE基础知识1】

最新推荐文章于 2025-12-07 09:58:49 发布

原创最新推荐文章于 2025-12-07 09:58:49 发布 · 736 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

7 篇文章

订阅专栏

1、 Vue的特点

1、遵循MVVM模式

2、编码简洁，体积小，运行效率高，适合移动/PC端开发

3、它本身只关注UI，可以引入其它第三方库开发项目

2、与其他JS框架的关联

1、借鉴 Angular 的模板和数据绑定技术
2、借鉴 React 的组件化和虚拟DOM技术

3、 Vue周边库

1、vue-cli：vue脚手架
2、vue-resource
3、axios
4、vue-router：路由
5、vuex：状态管理
6、element-ui：基于vue的UI组件库（PC端

4、初识Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="app">
        <h1>Hello {{name}}!</h1>
    </div>

    <script>
        new Vue({
            //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            el:'#app', 
            //data用于存储数据，数据共el所指定的容器去使用
            data:{ 
                name:'World'
            }
        })
    </script>
</body>
</html>

效果图：

主意：

1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
2、app容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
3、app容器里的代码被称为Vue模板
4、Vue实例与容器是一一对应的，真实开发中只有一个Vue实例，并且会配合着组件一起使用
5、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
6、一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新

5、模板语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>插值语法</h1>
        <h3>你好，{{name}}!</h3>
        <hr>
        <h1>指令语法</h1>
        <a v-bind:href="url">快去看新番！</a><br>
        <a :href="url">快去看新番！</a>
    </div>

    <script> 
        new Vue({
            el:'#app', 
            data:{ 
                name:'杨乙燃',
                url:'https://www.bilibili.com/'
            }
        })
    </script>
</body>
</html>

效果图:

主意：

Vue模板语法包括两大类：

1、插值语法：

功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有区域

2、指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：<a v-bind:href="xxx">或简写为<a :href="xxx">，xxx同样要写js表达式，且可以直接读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是v-xxx，此处我们只是拿v-bind举个例子

6、数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        单向数据绑定：<input type="text" v-bind:value="name"><br>
        <a><span>{{name}}</span></a><br>
        双向数据绑定：<input type="text" v-model="name"><br>
        <a><span>{{name}}</span></a>
    </div>

    <script>
        new Vue({
            el:'#app', 
            data:{
                name:'杨乙燃'
            }
        })
    </script>
</body>
</html>

效果图：

主意：

1、单向绑定（v-bind）：数据只能从data流向页面
2、双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
3、双向绑定一般都应用在表单类元素上（如：<input>、<select>、<textarea>等）
4、v-model:value可以简写为v-model，因为v-model默认收集的就是value值

7、el与data的两种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>Hello,{{name}}!</h1>
    </div>

    <script>
        //el的两种写法：
        //第一种写法
         const vm = new Vue({
           el:'#app', 
            data:{
                name:'杨乙燃'
             }
         })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>Hello,{{name}}!</h1>
    </div>

    <script>
        //el的两种写法：
         const vm = new Vue({
            data:{
                name:'杨乙燃'
             }
         })
        //第二种写法
        vm.$mount('#app')
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>Hello,{{name}}!</h1>
    </div>

    <script>
        //data的两种写法：
        new Vue({
            el:'#app', 
            //data的第一种写法：对象式
            data:{
                     name:'杨乙燃'
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>Hello,{{name}}!</h1>
    </div>

    <script>
        //data的两种写法：
        new Vue({
            el:'#app',
            //data的第二种写法：函数式
            data(){
                return{
                    name:'杨乙燃'
                }
            }
        })
    </script>
</body>
</html>

效果图：