vue基础学习

最新推荐文章于 2022-10-15 17:01:09 发布

VIP文章醉小义

最新推荐文章于 2022-10-15 17:01:09 发布

阅读量677

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_30638831/article/details/106462537

版权

Vue.js - day01

插件安装推荐

vscode有二个常用插件：vetur，Vue 2 Snippets

vetur:让一些vue的关键字能高亮显示，还能进行一些语法的检测。
- 语法错误检查，包括 CSS/SCSS/LESS/Javascript/TypeScript等
- 语法高亮，包括 html/css/sass/scss/less/js/ts等
Vue 2 Snippets：能在平时写代码过程中提示功能更强大,对vue的语法有提示

官网地址(里面列出了相关提示快捷词)： https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vXD90P0b-1590934357097)(image-20191119103749989.png)]

安装方式有二种：在线安装（能上网，条件允许推荐在线安装）,离线安装

在线安装：在vscode中按（ctrl+shift+x）,搜索插件名称（例：vetur），

会出现相关插件，如果里面有install.就点击安装，如果安装完成就没install了

离线安装：拷贝相应的压缩包解压到相应目录下面（2个vscode插件.zip）

C:\Users\电脑用户名\.vscode\extensions

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6QKwoN1w-1590934357099)(image-20191108110536413.png)]

安装完成后，重启一下vscode就可使用插件了

vue.js是什么

官网地址

我们学习一个知识，首先是不是要了解它是什么？有什么特点？

vue.js是什么：vue就是一个javascript框架，

**特点：**无需再操作dom,只关心数据

vue做法与传统js对比

<!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>
</head>

<body>
    <!-- js传统做法 -->
    <input type="text" id="txt">
    <p id="p">您输入了:</p>
    <script>
        let _txt = document.getElementById("txt")
        let _p = document.getElementById("p")
        _txt.oninput = function () {
    
            _p.innerText = "您输入了:" + _txt.value
        }
    </script>

    <!-- vue做法 -->
    <div id="app">
        <input type="text" v-model="msg">
        <p>您输入了:{
  {msg}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
    
            el: "#app",
            data: {
    
                msg: "hello"
            }
        })
    </script>
</body>

</html>

总结：对vue而言，我们无需再操作dom,只需要关心数据data,把相应的数据与标签用vue的语法关联上就OK了

vue的基本使用

我们刚子解了vue是什么和它的特点，那我们如何去使用它呢？

直通车

基本使用方法（分三步）：

引包(导入vue.js到html)
- 引包这里官网说到二个词，开发环境，生产环境
  - 开发环境：就是我们作为开发人员写代码过程中使用的环境,选择包相当于jquery时的jquery.min.js。
  - 生产环境：项目正式上线后的环境,选择包相当于jquery时的jquery.js。
  学习阶段我们还是用开发环境的包，因为代码会有相关警告提示等。
```
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```

布局。（写好页面标签，以前怎么写现在还怎么写）例：

    <div id="app">
        {
    {msg}}
    //这个div写了一个id,就是留这个id以便vue更方便vue实例化时方便获取
    </div>

vue实例化

    <script>
        new Vue({
     
            //这里el相当于确定实例化范围就是id为app的标签，后面写法相当于一个选择器，注：这里不能选择body与html,尽量写一个id标签供选择，独一无二，可读性强，规范。  
            el: "#app",
            //这里的data就是vue需要使用到的数据，vue是以数据驱动页面，数据就来自于这里
            data: {
     
                msg: "hello"
            }
        })
    </script>

<!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>
</head>

<body>
    <!-- 基本使用分为三步：
1：导包；2：布局；3：实例化
-->

    <!-- 2:布局 -->
    <div id="app">
        <!-- vue的一个插值语法，相当于挖个坑，用下面的就是值来填上 -->
        {
  { message }}message
        <div>{
  {message}}</div>
    </div>



    <!-- 1:导包(开发环境的包) -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //3:实例化过程    
        var app = new Vue({
    
            el: '#app',//el实际就是element，选择标签  实际就是确定vue的使用范围  ,注意这里不能选择 <html> or <body>      
            data: {
          //数据存放的地方
                message: 'Hello Vue!',
                txt: ""
            }
        })
    </script>
</body>

</html>

v-text指令（类似于innerText）

如何改变一个标签里面的内容呢？

直通车

**用法：**v-text有二种用法，里面的值都可使用一句话的表达式，如 xxx, xxx+123 ,xxx?“1”:“2” obj.xxx等一句话简短表达式

<span v-text="msg"></span>//用于整个span标签内的textContent内容替换

<span>消息：{
    {msg}}</span>  //用于部分span标签内的textContent内容替换
//这也叫插值语法

   
   msg可以是一个变量，也可以是一个简短的一句话表达式
   
   

**功能：**

- v-text=“msg”  ，它

最低0.47元/天解锁文章

醉小义

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础学习

Vue.js - day01插件安装推荐vscode有二个常用插件：vetur，Vue 2 Snippetsvetur:让一些vue的关键字能高亮显示，还能进行一些语法的检测。语法错误检查，包括 CSS/SCSS/LESS/Javascript/TypeScript等语法高亮，包括 html/css/sass/scss/less/js/ts等Vue 2 Snippets：能在平时写代码过程中提示功能更强大,对vue的语法有提示官网地址(里面列出了相关提示快捷词)： https://
复制链接

扫一扫