Vue基本操作

最新推荐文章于 2024-07-25 09:37:37 发布

coloemmy

最新推荐文章于 2024-07-25 09:37:37 发布

阅读量132

点赞数

分类专栏：前端笔记文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45490507/article/details/115010429

版权

前端笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

VUE

1. Vue.js 是什么

Vue是一套用于构建用户界面的渐进式框架

Vue的和核心库只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。官网：

2. VScode 抽取Vue代码片段

文件=> 首选项=> 用户代码片段=> 新建全局代码片段/或文件夹代码片段:XXX.code-snippets

{
	"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. 基本语法

3.1 基本数据渲染和指令

单向数据绑定

v-bind 指令。(指令带有前缀 v-)

除了使用插值表达式 {{}} 进行数据渲染，也可使用v-bind指令，它的简写的形式就是一个冒号（ : ）

<div id="app">
    <!-- v-bind指令 
		单向数据绑定
		这个指令一般用在标签属性里面，获取值
	-->
    <h1 v-bind:title="message">
        {{content}}
    </h1>   
    <!-- 简写 -->
    <h1 :title="message">
        {{content}}
    </h1>
</div>

双向数据绑定

v-model

vue 绑定事件

v-on

v-on:事件=“方法名称” 简写省略v-on为@

 <div id="app">
        <button v-on:click="search()">查询</button>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            searchMap:{ 
                keywords:'你好'
            },
            result:{}
        },
        methods:{
            search(){
                console.log('search...')
            }
        }
    })
</script>

修饰符

修饰符（Modifiers）是以半角句号（.）指明特殊后缀，用于指出一个指令应该以特殊方式绑定。

条件渲染

v-if：条件指令

<div id="app">
    <input type="checkbox" v-model="ok">是否同意</input>
<h1 v-if="ok">你好</h1>
<h1 v-else>你不好</h1>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            ok:false
        }
    })
</script>

v-show：条件指令

列表渲染

v-for：列表循环指令

<div id="app">
    <table border="1px">
        <tr v-for="user in userList">
            <td>{{user.id}}</td>
            <td>{{user.username}}</td>
            <td>{{user.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:"Jack", age:"5"},
                {id:3, username:"tom", age:"6"}
            ]
        }
    })
</script>

4. 组件

组件（Component）是Vue.js最强大的功能之一。

组件可以扩展HTML元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

局部组件

定义组件：

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

全局组件

定义全局组件：

创建一个js：

Vue.component('Navbar',{
	template:'<ul><li>首页</li><li>课程管理</li></ul>'
})

然后引用js文件，直接使用标签可以

Vue实例声明周期

重要方法：数据渲染之前执行: created() 数据渲染之后执行: mounted()

<div id="app">
    <h1>文字..</h1>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {

        },
        created(){
            debugger
            console.log("你好")
        },
        mounted(){
            debugger
            console.log("hello")
        }
    })
</script>

Vue路由

Vue.js 路由允许我们通过不同的URL访问不同的内容。

通过Vue.js 可以实现多视图的单页web应用（single page web application, SPA）

Vue.js 路由需要载入vue-router 库

引入js

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

编写html

<div id="app">
    <h1>hell</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>
    new Vue({
        el: '#app',
        data: {

        }
    })
</script>

编写js

<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>
Teacher }
        ]

        // 3. 创建 router 实例，然后传 `routes` 配置
        const router = new VueRouter({
            routes // （缩写）相当于 routes: routes
        })

        // 4. 创建和挂载根实例。
        // 从而让整个应用都有路由功能
        const app = new Vue({
            el: '#app',
            router
        })
    </script>

coloemmy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基本操作

VUE1. Vue.js 是什么2. VScode 抽取Vue代码片段3. 基本语法3.1 基本数据渲染和指令单向数据绑定双向数据绑定vue 绑定事件修饰符条件渲染列表渲染4. 组件局部组件全局组件Vue实例声明周期Vue路由1. Vue.js 是什么Vue是一套用于构建用户界面的渐进式框架Vue的和核心库只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。官网：2. VScode 抽取Vue代
复制链接

扫一扫

专栏目录