VSCode创建片段和 vue入门，基本语法，组件,生命周期，路由

最新推荐文章于 2024-04-23 00:58:44 发布

奇纳尼

最新推荐文章于 2024-04-23 00:58:44 发布

阅读量425

点赞数

文章标签： vue.js vscode javascript html

本文链接：https://blog.csdn.net/qq_39564710/article/details/113250485

版权

为什么要创建片段，因为有些前端代码都是重复的，我们可以创建片段把这些公用代码放到片段里面，然后需要时候直接调用片段

1:在vs code中创建代码片段：

文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets,然后在里面加入代码，在html文件中直接输入 vue1 ，就会出现下面代码的整个结构

{
    "vue1": {
        "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>

2:vue入门基本语法：

使用前，必须引入<script src="vue.min.js"></script> js

1：单项绑定： v-bind: 也可以简写为： v-bind: 绑定的是属性

2：双向绑定： v-model v-model=“值” ，然后这个值是双向绑定的

3: 事件: v-on: 也可以简写为 @

4: 修饰符: .prevent

5: 条件渲染 : v-if：条件指令

6: 列表渲染: v-for

实例如下：

<!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">
        <!-- 1 绑定数据 -->
        <h1>{{searchMap.keyWord}}</h1>

        <!-- 2 v:bind 单项绑定数据,也可以简写 : ,例如:title -->
        <h2  v-bind:title="message"></h2>
        <!-- 3 v:bind ，也可以简写：，单项绑定在属性上，这样属性:value=这个后面就可以加表达式了，再举个例子  -->
        <!-- a 标签中的 href属性，herf='' ,这个里面只能写固定的值，那么我想改成动态的，就用
            ：href =obj.herf 这中就可以动态的直接从对象中取了  -->
        <input type="text" :value="searchMap.keyWord" />

        <!-- 4 v-model 可以进行双向数据绑定 -->
        <input type="text" v-model="searchMap.keyWord"/>

        <!-- 5 v-on:click 是点击按钮调用search()方法的写法,
            也可以用简写 @click-->
        <button v-on:click="search()">查询1</button>
        <button @click="test()">查询2</button>

        <!-- 6 .prevent修饰符告诉 v-on 于触发的事件阻止表单提交的默认行为-->
        <form action="save" v-on:submit.prevent="onSubmit">
            <label for="username">
                        <input type="text" id="username" v-model="user.username">
                        <button type="submit">保存</button>
            </label>
        </form>

        <!-- 7 单个复选框绑定到布尔值-->
        <!-- -->
        <input type="checkbox" v-model="ok">同意许可协议
        <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
        <h1 v-if="ok">同意</h1>
        <h1 v-else>不同意</h1>

        <!-- 8 v-for遍历数据列表,userList是遍历的集合，item是集合里面对象 -->
        <table border="1">
            <!-- <tr v-for="item in userList"></tr> -->
            <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: {
                content: '我是标题',
                message: '页面加载于 ' + new Date().toLocaleString(),
                searchMap:{
                        keyWord: '齐云'
                    },
                user: {},
                ok: false,
                userList: [
                    { id: 1, username: 'helen', age: 18 },
                    { id: 2, username: 'peter', age: 28 },
                    { id: 3, username: 'andy', age: 38 }
                ]
            },
            // 所有的事件都写在methods里面，然后被调用
            methods:{
                search(){
                    console.log('search')
                },
                test(){
                    console.log('test11')
                },
                onSubmit(){
                    if (this.user.username) {
                        console.log("允许提交表单")
                    } else {
                        console.log("请输入用户名");
                    }
                }
            }
        })
    </script>
</body>

</html>

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

a:局部组件：只在当前界面生效

 <!-- 9 定义局部组件-->
        <Test></Test>
        
        
            components:{
                'Test': {
                //组件的内容
                template: '<ul><li>11</li><li>22323</li></ul>'
                }
            }

b:全局组件：可以引入后，在所有界面都可以用

先创建一个js,里面内容可以随便写，例如，然后在别的js直接引入js即可<script src="/components/stu.js"></script>，然后在调用组件<Navbar><Navbar/>

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

4:生命周期

生命周期用的比较多的就是，created 就是在页面渲染前执行，mounted页面选然后执行

  created() {
                // debugger
                //在页面渲染之前执行
                console.log('created....')
            },
            mounted() {
                // debugger
                //在页面渲染之后执行
                console.log('mounted....')
            },

5：路由

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

Vue.js 路由需要载入 vue-router 库， <script src="vue-router.min.js"></script>

示例如下代码：

<body>
    <div id="app">


        <!-- 11 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <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></router-view>

    </div>
        
    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>
    <script src="/components/stu.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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VSCode创建片段和 vue入门，基本语法，组件,生命周期，路由

为什么要创建片段，因为有些前端代码都是重复的，我们可以创建片段把这些公用代码放到片段里面，然后需要时候直接调用片段1:在vs code中创建代码片段：文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets,然后在里面加入代码，在html文件中直接输入 vue1 ，就会出现下面代码的整个结构{"vue1":{"scope":"html","pr...
复制链接

扫一扫