Vue

最新推荐文章于 2024-06-12 08:41:10 发布

二旬、

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量108

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45602227/article/details/113768933

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、 Vue 的基本认识

1.1.1. 官网

1) 英文官网: https://vuejs.org/ 
2) 中文官网: https://cn.vuejs.org/

1.1.2. 介绍描述

1) 渐进式 JavaScript 框架 
2) 作者: 尤雨溪(一位华裔前 Google 工程师)
3) 作用: 动态构建用户界面

1.1.3. Vue 的特点

1) 遵循 MVVM 模式 
2) 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发 
3) 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

1.1.4. 与其它前端 JS 框架的关联


 1) 借鉴 angular 的模板和数据绑定技术 
 2) 借鉴 react 的组件化和虚拟 DOM 技术

1.1.5. Vue 扩展插件

 1) vue-cli: vue 脚手架 
 2) vue-resource(axios): ajax 请求 
 3) vue-router: 路由 
 4) vuex: 状态管理 
 5) vue-lazyload: 图片懒加载 
 6) vue-scroller: 页面滑动相关 
 7) mint-ui: 基于 vue 的 UI 组件库(移动端) 
 8) element-ui: 基于 vue 的 UI 组件库(PC 端)

1.1.6. 理解 Vue 的 MVVM

在这里插入图片描述

	MVVM:
		M-	model，模型，数据data
		
		V-	view，视图，模板页面
		
		VM-viewmodel，视图模型（Vue对象的实例）

	M模型，DOM对象定义模型

二、 Vue 的基本使用

1.2.1 Vue的调试工具

在这里插入图片描述

	1.将该包解压
	2.拖进谷歌浏览器安装插件

1.2.2 简单案例

>>>>>> 新建js文件夹，引入vue.js

在这里插入图片描述

>>>>>> heelo.vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="app">
        <input type="text"  v-model="msg">

        <h1>1.双大括号表达式</h1>
        <p>{{msg}}</p>
        <p>{{msg.toUpperCase()}}</p>
        <p v-text="msg"></p>
        <p v-html="msg"></p>

        <h1>2.指令一：强制数据绑定</h1>
        <img v-bind:src="imgUrl"  style="width:50px;height:50px;">(完整写法)
        <img :src="imgUrl"  style="width:50px;height:50px;">（缩写）

        <h1>2.指令一：绑定事件监听</h1>
        <button v-on:click="test">测试</button>(完整写法)
        <button @click="test2('hlp')">测试</button>（缩写）

    </div>


    <hr/>



    <script  type="text/javascript"  src="../js/vue.js"></script>

    <script  type="text/javascript">

     new Vue({
         el:'#app',
         data:{
             msg:'xxx',
             imgUrl:'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
         },
         methods:{
            test() {
                alert("ccc")
            },
             test2(s) {
                 alert(s)
             }


         }
     })

    </script>
</body>
</html>