【vue入门学习】1. Vue 语法初探

最新推荐文章于 2024-07-25 21:13:00 发布

myt2000

最新推荐文章于 2024-07-25 21:13:00 发布

阅读量305

点赞数

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

本文链接：https://blog.csdn.net/myt2000/article/details/121806245

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

1.Vue 语法初探

文章目录

1.Vue 语法初探

最近学习了下vue，感觉vue的官网阅读起来有点困难，自己找资料整理下了

vue的学习前提，需要掌握的技术：html + css + js

1.1 安装Visual Studio Code

百度搜索即可安装Visual Studio Code
新建一个文件夹，拖入到vs code中

新建一个index.html

输入!+tab键会直接生成一个html模板文，先输入! 再按TAB键

引用vue cdn

谷歌的地址：https://unpkg.com/vue@next

1.2 声明式渲染:网页自动加1案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                content:1
            }
        },
        mounted(){
            setInterval(() => {
                this.content +=1;
            }, 1000)
        },
        template: '<div>{{content}}</div>'
    }).mount('#root');
</script>
</html>

官方文档

与官方文档不太一样的地方是官方文档没有写div标签的id,而是直接定义的
   <div id="counter">
       Counter: {{ counter }}
   </div>

v-bind attribute 被称为指令。

1.3 处理用户输入: 字符串反转案例

v-on 指令添加一个事件监听器，通过它调用在实例中定义的方法

v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 2</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                content: 'hello world'
            }
        },
        methods: {
            handleBtnClick() {
                this.content = this.content.split('').reverse().join('');
                // this.content = 'dlorw olleh'
            }
        },
        template: `
        <div>
            {{content}}
            <button v-on:click="handleBtnClick">反转</button>
        </div>
        `
    }).mount('#root');
</script>
</html>

1.4 条件与循环

1.4.1 控制页面内容显示: 隐藏/显示

v-if 进行页面内容的判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 2</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                show: true,
            }
        },
        methods: {
            handleBtnClick() {
                this.show = !this.show;
            }
        },
         // `单符号内可以写多行html`
        template: `    
        <div>
            <span v-if="show">hello world</span>
            <button v-on:click="handleBtnClick">显示/隐藏</button>
        </div>
        `
    }).mount('#root');
</script>
</html>

1.4.2 循环

v-model双向绑定
v-for可以循环展示标签

<!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>loop</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                inputValue: "",                               
                list: []
            }
        },
        methods:{
            handleAddItem() {
                // console.log(this.inputValue);
               this.list.push(this.inputValue);
               this.inputValue = "";
            }
        },
        template: `
        <div>
            <input v-model="inputValue"/>
            <button v-on:click="handleAddItem">增加</button>
        <ul>
            <li v-for="(item, index) of list">{{item}} {{index}}</li>
                </ul>
                </div>`
    }).mount('#root');
</script>
</html>

1.5 组件化应用构建

组件使用步骤：

创建Vue应用
定制组件， app.component
挂载Vue组件

<!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>loop</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
	//
    const app = Vue.createApp({
        data() {
            return {
                inputValue: "",                               
                list: []
            }
        },
        methods:{
            handleAddItem() {
                // console.log(this.inputValue);
               this.list.push(this.inputValue);
               this.inputValue = "";
            }
        },
        template: `
        <div>
            <input v-model="inputValue"/>
            <button 
            v-on:click="handleAddItem"
            v-bind:title="inputValue"
            >
            增加
            </button>
        <ul>
            <todo-item v-for="(item, index) of list" v-bind:content="item" v-bind:index="index"/>

              
                </ul>
                </div>`
    });
    //定义组件
    app.component('todo-item', {
        props: ['content', 'index'],
        template: `<li>{{index}} -- {{content}}</li>`
    });
    //挂载组件
    app.mount('#root')
</script>
</html>