vue 学习【note1】

呜昂昂
62 阅读1分钟

使用VSCode工具

  • 安装 Live server 、 vue2Snippets 插件

使用Chrome浏览器

  • 安装 Vue.js devtools 插件

下载vue.js 文件

新建vue.html文件

<!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>
    <!-- 引入Vue -->
    <script type="text/javascript" src="./vue.js" charset="UTF-8" ></script>
</head>
<body>
    
    <div id="root">
        <!-- 插值语法 -->
        <h3>Hello {{name}}</h3>
        <!-- 分割线 -->
        <hr> 
        <!-- 指令语法/标签 -->
        <a v-bind:href="url" x="hellow">跳转{{name}}百度1</a>
        <!-- 简写 -->
        <a :href="url" :x="hellow">跳转{{name}}百度2</a>
    </div>

    <script>
        new Vue({
            // 绑定上面 id=root 
            el:'#root',
            data:{
                name:'wkw',
                url:'http://www.baidu.com',
                hellow:'wkw'
            }
        })
    </script>
    
    <!-- <script src="index.js"></script> -->
</body>
</html>

运行效果

WeChateba5a20daaaf13fc53e427c6643f7dc2.png

<!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>
    <!-- 引入Vue -->
    <script type="text/javascript" src="./vue.js" charset="UTF-8" ></script>
</head>
<body>
    
    <div id="root">
        <!-- 插值语法 -->
        <h3>Hello {{name}}</h3>

        <!-- 分割线 -->
        <hr> 

        <!-- 指令语法/标签 -->
        <a v-bind:href="url" x="hellow">跳转{{name}}百度1</a>
        <!-- 简写 -->
        <a :href="url" :x="hellow">跳转{{name}}百度2</a>

        <hr> 
        <!-- 数据绑定--普通写法 -->
        单向数据绑定: <input type="text" v-bind:value="name">  <br> 
        双向数据绑定: <input type="text" v-model:value="name"> <br>
        <!-- 数据绑定--简写 -->
        单向数据绑定: <input type="text" value="name">  <br> 
        双向数据绑定: <input type="text" v-model="name">
    </div>

    <script>
        const vm = new Vue({
            // 指定上面 id=root 的容器 方法一
            // el:'#root',

            //data 的第一种写法 对象式
            // data:{
            //     name:'wkw',
            //     url:'http://www.baidu.com',
            //     hellow:'wkw'
            // }
            //data 的第二种写法 函数式
            // data() {
            //     return {
            //         name:'wkw',
            //     };
            // },
            data:function(){
                return{
                    name:'wkw',
                    url:'http://www.baidu.com',
                    hellow:'wkw'
                }
            }
        })
        // 指定上面 id=root 的容器 方法二
        vm.$mount('#root')
    </script>
    
    <!-- <script src="index.js"></script> -->
</body>
</html>

WeChat140925f3e9c14307b57de2c603169aab.png

avatar
文章
阅读
粉丝