Vue基础（一）

最新推荐文章于 2023-03-27 22:17:22 发布

何时能脱坑

最新推荐文章于 2023-03-27 22:17:22 发布

阅读量981

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_59675867/article/details/125987252

版权

文章目录

初识Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue是声明式编程，区别于原生js和jquery的命令式编程。

一、命令式编程和声明式编程

1.1. 命令式编程

原生js做法（命令式编程）

1. 创建div元素，设置id属性
2. 定义一个变量叫message
3. 将message变量放在div元素中显示
4. 修改message数据
5. 将修改的元素替换到div

1.2 . 声明式编程

vue写法（声明式）

1. 创建一个div元素，设置id属性
2. 定义一个vue对象，将div挂载在vue对象上
3. 在vue对象内定义变量message，并绑定数据
4. 将message变量放在div元素上显示
5. 修改vue对象中的变量message，div元素数据自动改变

二、如何引入vue

进入vue官网：Vue.js (vuejs.org)

点击开发版本和生产版本后开始下载文件，将vue.js文件用script标签引入

<script src="根据你自己的vue.js文件所在路径/vue.js"></script>

三、Vue实例

2.1 插值操作

<div id="app">  
	<h2>{{name}}</h2><!-- 大括号语法 -->
</div>

<script src="vue.js"></script> <!-- 引入vue.js文件 -->
<script>
	const vm = new Vue({
		el:'#app',   // 挂载要管理的元素
		data:{       // 定义数据
			name:'张超'  
	    }
	})
</script>

2.2 v-bind指令

    <div id="app">
   <!-- <a v-bind:href="url">点击跳转</a> -->
        <a :href="url">点击跳转</a> <!-- v-bind简写 -->
        <h2>姓名：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>

    <script src="./vue.js"></script>
    <script>
        Vue.config.productionTip = false // 去除控制台的提示，写不写都不影响

        const vm = new Vue({
            el:'#app',
            data:{
                url:'https://www.bilibili.com/',
                name:'波波',
                address:'罗马竞技场',
                txt:'输入内容'
            }
    </script>