前端框架vue基础

laufing

已于 2024-04-04 22:11:48 修改

阅读量679

点赞数 1

分类专栏：前端框架Vue 文章标签： vue.js 前端框架基础

于 2021-12-10 21:27:35 首次发布

本文链接：https://blog.csdn.net/weixin_45228198/article/details/121864698

版权

前端框架Vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

安装vue

直接使用script引入vue.js
下载地址

<script src='/static/js/vue.jg'> //开发测试版（有警告提示等）
<script src='/static/js/vue.min.js'> //生产版

#cdn方式
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

导入后可以全局使用 Vue

npm 安装脚手架

npm install -g @vue/cli

安装vue的开发工具

即Chrom 的一个插件vue devtools
下载地址
官网给的地址不太好打开！！

下载完成，解压，安装到Chrom浏览器
在这里插入图片描述
只有项目在使用服务端模式启动时，V标识才会亮起！！
将Chrom设置为默认浏览器，vscode中右键，open with live server，所有的目录资源都会在服务的 / 目录下。

第一个Vue项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue basic</title>
    <script src="../static/js/vue.js"></script>
</head>
<body>
    <!-- 容器，容器内部为vue模板 -->
    <div id="test">
        <h4>插值语法</h4>
        <h3>测试vue, {{ name }}</h3>
        
        <h4>指令语法</h4>
        <a v-bind:href="url">百度</a>
        <a :href="url">百度1</a>
        <a :href="school.addr.toUpperCase()">School home</a>
    </div> 
    <script type='text/javascript'>
        // Vue.config 全局配置， 生产提示关闭
        Vue.config.productionTip = false

        //创建Vue实例，并传入一个配置对象
        new Vue({
            el: "#test", //element缩写 选择容器节点，一般使用css选择器
            data: {    //供容器使用的数据
                name: "jack",
                url: 'https://www.baidu.com',
                school: {
					addr: 'https://tuna.tsinghua.edu.cn',
					}
            }
        })
        
    </script>
</body>
</html>

Vue是构造方法，使用new 来调用，且传入一个配置对象。
el ，即element，选择容器对象，一般使用css选择器；data为容器中需要使用的数据，可以识别到data的所有属性。
生产中，只有一个Vue实例，且与容器一一对应。
标签内部使用插值语法{{ name }}，内部为js表达式; 标签属性使用指令语法v-bind将属性的字符串值解析为js表达式子，然后从Vue实例中拿数据。

数据的绑定

v-bind 实现data到页面的单向绑定。
v-model实现data到页面的双向绑定，互相影响，一般用于表单组件的value属性的解析。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定数据</title>
    <script src="/static/js/vue.js"></script>
</head>
<body>


    <div id='test'>
        <span>v-bind单向绑定：</span><input type="text" v-bind:value="name"><br>
        <span>v-model双向绑定：</span><input type="text" v-model:value="name">
    </div>
    
    
    <script type="text/javascript">
    	//global config
        Vue.config.productionTip = false
        new Vue({
            el: "#test",
            data: { //容器中使用的数据
                name: "jack",
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
v-bind:value----->简写-----> :value
v-model:value------>简写-----> v-model

laufing

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端框架vue基础

目录安装vue安装vue的开发工具安装vue直接使用script引入vue.js下载地址<script src='/static/js/vue.jg'> //开发测试版（有警告提示等）<script src='/static/js/vue.min.js'> //生产版#cdn方式<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>导入后可以全局使用 Vuenp
复制链接

扫一扫