帝皇彩票官网

小白学VUE——快速入门

2020-5-13    前端达人 前端及开发文章及欣赏

文章目录
小白学VUE——快速入门
前言:什么是VUE?
环境准备:
vue的js文件
vscode
Vue入门程序
抽取代码片段
vue标准语法:
什么是vue指令?
v-bind指令
事件单向绑定
v-model:事件双向绑定
v-on事件监听指令
v: on:submit.prevent指令
v-if 判断指令
v-for 循环渲染指令

前言:什么是VUE?

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

点击查看原图

环境准备:
vue的js文件
使用CDN外部导入方法
以下推荐国外比较稳定的两个 CDN,把这些网址放进script标签的src属性下即可,国内还没发现哪一家比较好,目前还是建议下载到本地。

Staticfile CDN(国内) : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
2.VSCODE软件
(2).使用内部导入方法(自行下载js文件放进工作区js文件夹即可)

2.png

vscode

前往vscode官网下载对应版本的vscode

点击查看原图

Vue入门程序
首先了解一下什么是插值
插值:数据绑定最常见的形式就是使用 **{{…}}(双大括号)**的文本插值:

单独抽出这段来看一下:
Vue即是vue内置的对象,el(element)指的是绑定的元素,可以用#id绑定元素,data指的是定义页面中显示的模型数据,还有未展示的methods,指的是方法

var app = new Vue({
            el: "#app",//绑定VUE作用的范围
            data: {//定义页面中显示的模型数据
                message: 'hello 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 src="js/vue.min.js"></script>

</head>
<body>
    

    <!-- 插值表达式 获取data里面定义的值 {{message}} -->
    <div id="app">{{ message }}</div>

    <script>
        //创建一个VUE对象
        var app = new Vue({
            el: "#app",//绑定VUE作用的范围
            data: {//定义页面中显示的模型数据
                message: 'hello vue'
            }
        });

    </script>

</body>
</html>

抽取代码片段

步骤:文件-首选项-用户片段
输入片段名称回车

复制以下片段覆盖之前的注释内容

{
"vh": {
"prefix": "vh", // 触发的关键字 输入vh按下tab键
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
"    <meta charset=\"UTF-8\">",
"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"    <title>Document</title>",
"    <script src=\"js/vue.min.js\"></script>",
"</head>",
"",
"<body>",
"    <div id=\"app\"></div>",
"    <script>",
"        var vm=new Vue({",
"           el:'#app',",
"           data:{},",
"           methods:{}",
"        });",
"    </script>",
"</body>",
"",
"</html>",
],
"description": "vh components"
}
}

此时,新建一个html文件,输入vh在按下tab键即可快速填充内容

vue标准语法:
什么是vue指令?
在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示
类似于html页面中的属性 `

比如在angular中 以ng-xxx开头的就叫做指令
在vue中 以v-xxx开头的就叫做指令
指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值,框架会进行相关DOM操作的绑定

下面简单介绍一下vue的几个基础指令: v-bind v-if v-for v-on等

v-bind指令
作用:

给元素的属性赋值
可以给已经存在的属性赋值 input value
也可以给自定义属性赋值 mydata
语法
在元素上 v-bind:属性名="常量||变量名"
简写形式 :属性名="变量名"
例:
<div v-bind:原属性名="变量"></div> <div :属性名="变量"></div>

事件单向绑定

事件单向绑定,可以用 v-bind:属性名="常量||变量名,绑定事件,用插值表达式取出值

<body>
    <div id="app">
    
        <h1 v-bind:title="message">
            {{content}}
        </h1>

        <!-- 简写方式 -->
        <h2 :title="content">{{message}}</h2>


    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               content: '我是标题',
               message: '页面加载于' + new Date().toDateString()
           }
           
        });
    </script>
</body>

效果:
20200511203222885.png


————————————————
版权声明:本文为CSDN博主「热爱旅行的小李同学」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m0_46275020/java/article/details/106055312


标签: html VUE

赞赏


微信

支付宝
拼图有真情 / 人间有真爱您的赞赏将被用于
  • 持续深入的开发
  • 提供更多的风格
  • 租用更好的带宽

日历

链接

blogger

蓝蓝 http://www.bjhbys.com

存档

状元彩票开奖 桔子彩票网址 北京赛车pk10玩法 博发彩票APP下载 上海11选5走势 博发彩票开奖 福建快3开奖 状元彩票平台 大象彩票登入 博发彩票开户