vue

最新推荐文章于 2023-09-04 22:44:16 发布
最新推荐文章于 2023-09-04 22:44:16 发布
阅读量124 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45566354/article/details/113863405
版权
这篇博客介绍了Vue.js的基础知识，包括入门案例、代码片段制作、数据绑定（单向和双向）、事件处理、修饰符的使用、条件渲染和列表渲染。还详细讲解了Vue组件的创建（局部和全局）以及实例生命周期和路由的基本概念，为初学者提供了全面的Vue.js学习指南。
摘要由CSDN通过智能技术生成

Vue.js


前端框架

1.入门案例

  1. ！+table键（生成固定代码）

  2. 将vue.min.js放入对应文件夹在这里插入图片描述

  3. 引入vue<script src="vue.min.js"></script>

  4. 入门代码

<!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>Document</title>
</head>
<body>
    <div id="app">

        <!-- 插值表达式 -->
        {{message}}
    </div>

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

</html>

2.抽取vue代码片段

file => preferences -> User snippets -> new global/new snippets：vue-html.code-snippets
注意：制作代码片段的时候，字符串中如果包含文件中复制过来的“Tab”键的空格，要换成“空格键”的空格在这里插入图片描述
vue-html.code-snippets

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

"vue htm": {

	"scope": "html",

	"prefix": "vuehtml",

	"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>",

		"</head>",

		"",

		"<body>",

		"    <div id=\"app\">",

		"",

		"    </div>",

		"    <script src=\"vue.min.js\"></script>",

		"    <script>",

		"        new Vue({",

		"            el: '#app',",

		"            data: {",

		"                $1",

		"            }",

		"        })",

		"    </script>",

		"</body>",

		"",

		"</html>",

	],

	"description": "my vue template in html"
}
}

在这里插入图片描述

3.vue入门

1. 数据绑定
  1. 单向数据绑定
<body>
    <div id="app">
    <!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令

     此时title中显示的是模型数据-->
     
        <h1 v-bind:title="message">
            {{content}}
        </h1>
        
		<!-- v-bind 指令的简写形式： 冒号（:） -->
        <h1 :title="message">
            {{content}}
        </h1>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                content: '我是标题',
                message: '页面加载于'+new Date().toLocaleDateString()
            }
        })
    </script>
</body>
  1. 双向数据绑定
<body>
    <div id="app">

        <!-- v-bind:value只能进行单向的数据渲染 -->
        <input type="text" v-bind:value='searchMap.keyWord'></input>
       
        <!-- v-model 可以进行双向的数据绑定  -->
        <input type="text" v-model="searchMap.keyWord"></input>

        <p>{{searchMap.keyWord}}</p>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord:'尚硅谷'
                }
            }
        })
    </script>
</body>

</html>
2.事件
<body>
    <div id="app">
        <button v-on:click="search()">查询1</button>

        <p>{{searchMap.keyWord}}</p>
        <p><a b-bind:href="result.site" target="_blank">{{result.title}}</a></p>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord:'尚硅谷'
                },
                result:{}
            },
            methods:{
                search(){
                    console.log('search')
                    this.result = {
                        "title":"百度",
                        "site":"http://baidu.com"
                    }
                }
            }
        })
    </script>
</body>

        <!-- v-on 指令的简写形式 @ -->
        <button @click="searchMap()">查询</button>
3.修饰符

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
即阻止事件原本的默认行为

<body>
    <div id="app">

      <!-- 修饰符用于指出一个指令应该以特殊方式绑定。
     这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：
     即阻止表单提交的默认行为 -->
     <form action="save" v-on:submit.prevent="onSubmit">
         <label for="username">
             <input type="text" id="username" v-model="user.username"></input>
             <button type="submit">保存</button>

         </label>
     </form>


    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user:{}
            },
            methods:{
                onSubmit(){
                    if(this.user.username){
                        console.log("提交表单")

                    }else{
                        alert("请输入用户名")
                    }
                }
            }
        })
    </script>
</body>
4.条件渲染
<body>
    <div id="app">

        <!-- 注意：单个复选框绑定到布尔值 -->
        <input type="checkbox" v-model="ok">miao</input>
        <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
        <h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1>
        <h1 v-else>no</h1>


    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            },
            methods:{
                
            }
        })
    </script>
</body>

下面代码可以替换 v-if v-else

        <h1 v-show="ok">if：Lorem ipsum dolor sit amet.</h1>
        <h1 v-show="!ok">no</h1>
  1. v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
  2. v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
  3. 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
  4. 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
5.列表渲染
  1. 普通列表
    <div id="app">

        <ul>
            <li v-for="n in 10">{{n}}</li>
        </ul>
        <ul>
            <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
            <li v-for="(n,index) in 5">{{n}} -- {{index}}</li>
        </ul>

    </div>
  1. 数据列表
<body>
    <div id="app">
        <table>

            <tr v-for="(item,index) in userList">

                <td>{{index}}</td>
                <td>{{item.id}}</td>
                <td>{{item.username}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList:[
                    {id:1, username:'helen', age:18},
                    {id:2, username:'may', age:12},
                    {id:3, username:'andy', age:16}
                ]
            }
        })
    </script>
</body>

3. vue组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
9组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

  1. 局部组件
<body>
    <div id="app">
      <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            // 定义局部组件，这里可以定义多个局部组件
            components:{
                //组件的名字
                'Navbar':{
                    //组件的内容
                    template:'<ul><li>首页</li><li>学员管理</li></ul>'
                }

            }
        })
    </script>
</body>
  1. 全局组件

创建文件 components/Navbar.js

// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})

<body>
    <div id="app">
      <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script src="component/Navbar.js"></script></script>
    <script>
        new Vue({
            el: '#app',            
        })
    </script>
</body>

4.实例生命周期

在这里插入图片描述
两个比较重要的方法
created 在数据渲染前执行
mounted 在数据渲染后执行

5.路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库

<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>

<body>
    <div id="app">
        
            <h1>Hello App!</h1>
            <p>
                <!-- 使用 router-link 组件来导航. -->
                <!-- 通过传入 `to` 属性指定链接. -->
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                <router-link to="/">首页</router-link>
                <router-link to="/student">会员管理</router-link>
                <router-link to="/teacher">讲师管理</router-link>
            </p>
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
    <script src="vue.min.js"></script>
   <script src="vue-router.min.js"></script>
    <script>
            // 1. 定义（路由）组件。
            // 可以从其他文件 import 进来
            const Welcome = { template: '<div>欢迎</div>' }
            const Student = { template: '<div>student list</div>' }
            const Teacher = { template: '<div>teacher list</div>' }
            
            // 2. 定义路由
            // 每个路由应该映射一个组件。
            const routes = [
                { path: '/', redirect: '/welcome' }, //设置默认指向的路径
                { path: '/welcome', component: Welcome },
                { path: '/student', component: Student },
                { path: '/teacher', component: Teacher }
            ]
            
            // 3. 创建 router 实例，然后传 `routes` 配置
            const router = new VueRouter({
                routes // （缩写）相当于 routes: routes
            })
            
            // 4. 创建和挂载根实例。
            // 从而让整个应用都有路由功能
            const app = new Vue({
                el: '#app',
                router
            })
            // 现在，应用已经启动了！
        </script>
</body>
小苗要努力变强
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
tolocalestring()详解
qq_38796823的博客
04-01 683
JS 中 `toLocaleString`妙用_hjb2722404的博客-CSDN博客_js tolocalestring缘起kaven老师分享了一个数值取整的方法，即利用按位非操作符（~）进行取整：var a = 1.5;console.log(~~a); // 1但是这种方法有点限制就是它只能进行向下取整，无法实现四舍五入。所以就想到了toLocaleString() 方法，利用它可以巧妙第实现数值的四舍五入取整。利用toLocaleString取整我们直接上代码：var a = 1.5;consol
【6】toLocaleString、toLocaleDateString、toLocaleTimeString等toLocale系列方法的使用及案例
Etc.End的博客
07-27 1312
用toLocaleString、toLocaleDateString、toLocaleTimeString方法可以根据用户所在地区的语言和时间格式来显示日期和时间，提供更好的用户体验。我是Etc.End。每一次进步都值得庆祝，每一次努力都值得赞赏。不要忽视自己的成长，每一步都是向前迈进的力量。😍。
vue3 封装千分位分隔符自定义指令
最新发布
weixin_45150813的博客
09-04 991
vue3 封装千分位分隔符自定义指令
vue获取不同时区的时间
m0_59079084的博客
08-22 1265
使用vue获取悉尼，纽约，东京，北京的年月日，星期，时分秒时间，格式为YYYY-mm-dd WWW HH:MM:SS
vue基础
weixin_43356882的博客
03-12 133
js基础 js toLocaleString()用法 定义和用法 把数组转换为本地字符串。 语法: arrayObject.toLocaleString() 返回值: arrayObject 的本地字符串表示。 说明: 首先调用每个数组元素的 toLocaleString() 方法，然后使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串。 实例： ‘”’ 输出： George, John,...
vue2
02-21
武德莫项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。
Vue框架总结.pdf
04-03
Vue.js 是一款流行的前端JavaScript框架，它以声明式的数据绑定和组件化开发为特点，极大地提高了Web应用的构建效率。Vue CLI是Vue.js官方提供的一个命令行工具，用于快速搭建和管理Vue项目，简化开发流程。 Vue ...
VUE
03-28
VUE
Vue
02-09
Vue
狂神Vue笔记+源码.zip
05-10
狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue...
toLocaleString——实现保留几位小数功能——基础积累
yehaocheng520的博客
05-19 3494
toLocaleString——实现保留几位小数功能——基础积累
Vue的第一天学习
qq_44383759的博客
05-18 422
1.什么是Vue？ Vue是构建用户界面的渐进式框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用，由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。 Vue与传统的渲染方式不一样，Vue是声明式渲染，组建系统是Vue的核心库所包含内容，而客户端路由、状态管理、构建工具都有专门解决方案，Vue做了大量的工作，数据与DOM建立了联系，因此Vue上的所有东西是响应式的！有了Vue我们可以不用再直接与HTML交互了，一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这
toLocaleString也太好用了吧！（超方便转千分位，中文数字等）
HELLO WORD
09-29 6445
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/ 基本概念 目前，我查找了一下，下面三种数据类型都可以使用toLocaleString的方法 number.toLocaleString([locales [, options]])：返回这个数字在特定语言环境下的表示字符串 array.toLocaleString([locales [, options]])：返回一个字符串表示数组中的元素 date.toLocaleString([locales .
toLocaleString()方法和toString()方法
weixin_52094928的博客
07-06 676
toLocaleString()方法和toString()方法 1、javascript中的toString()方法，主要用于Array、Boolean、Date、Error、Function、Number等对象 （1）、Array.toString()：将数组转换成一个字符串，并且返回这个字符串 （2）、Boolean.toString()：将布尔值转换为字符串。 （3）、Date.toString()：将Date对象转换成一个字符串，采用本地时间。 （4）、Error.toString()：将Error
vue中请求的数据 时间戳转换时间
热门推荐
Zheng_xinle的博客
10-14 1万+
前言 下面是vue中将请求的数据中的时间戳 转化成标准时间,下面是我总结的两种方式： 第一种方式： 这里是在vue请求的数据中将时间戳转换字符串的 这是代码中的关键部分 //item.add_time 为请求数据中的时间戳 var date = new Date(parseInt(item.add_time) * 1000); item.add_time = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDay()}
toLocaleString( )和toString( )区别
王中博的博客
01-04 2572
《javascript高级程序设计》解释： “toLocaleString( )返回对象的字符串表示，该字符串与执行环境的地区对应；toString( )返回对象的字符串表示；”    感觉还是不太好理解......来看几个实例：var a = 6666; a.toLocaleString(); //"6,666" a.toString(); //"6666"可以看到，当数字是三位以上时，会
toLocaleString()获取本地日期和时间
吴小花的博客
09-03 3553
想要获取本地的实时时间，如左图为美国时间格式， 右图为中国时间格式、 1.HTML <p class="timeNow">15:48</p> <p class="ourTime"> Our time now</p> 2.js // 时间 $(document).ready(function () { ...
Vue组件精讲
《Vue组件精讲》是一本关于Vue.js框架的前端开发技术小册，主要介绍了Vue.js组件的核心思想和使用技巧。作者在本小册中着重分享了自己在3年的Vue.js开发和两年的iView开源项目中所积累和沉淀的关于Vue.js组件的见解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值