Vue（1）

最新推荐文章于 2024-07-09 21:18:14 发布

蓝搜香菇

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量749

点赞数 11

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/daiism/article/details/136534462

版权

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

<body>
    <!-- 创建容器，通常绑定id值 
    (注：搭建脚手架（vue-cli）后只能出现一个容器)-->
    <div id="app">
        {{ message }}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    // 取消Vue启动时出现的提示
    Vue.config.productionTip = false;
    var app = new Vue({  // 创建一个新的实例化Vue
        el: '#app',  // el绑定创建的容器
        data: { // data用于定义变量的集合,通常与插值提供
            message: 'Hello Vue!'
        }
    })
</script>

el:“容器名称，如id或class等”
Vue实例.$mount(“容器名称，如id或class等”)

( 注：$mount绑定方式一定放在实例最后 )

data两种方式

data:{ }对象式
data( ){return{ }}函数式

（注：不要使用箭头函数,搭建脚手架（vue-cli）后，必须使用函数式）

<body>
    <a v-bind:href="num">访问vue官网</a>
</body>
<script src="./vue.js"></script>
<script>
  var vm = new Vue({
        // 1.data:{}对象式
         data:{
             abc:"我是王五"
         },
        // 2.data(){return{}}函数式
        data() {
            return {
                abc:"我是赵六",
                num:"https://v2.cn.vuejs.org/v2/guide/instance.html"
            }
        },
    })
</script>

<body>
    <a v-bind:href="num">访问vue官网</a>
    <button v-on:click="func()">点击</button>
    <button @click="func2()">点击2</button>
</body>
<script src="./vue.js"></script>
<script>
  var vm = new Vue({
        data() {
            return {
                abc:"我是赵六",
                num:"https://v2.cn.vuejs.org/v2/guide/instance.html"
            }
        },
        // methods存放函数方法
        // 注：尽量不要使用箭头函数，否则拿取不到data的数据
        // 注：函数名称不要与变量名称一致
         methods: {
            func(){
                console.log(11111111);
            },
            func2:function(){
                console.log(222222222);
            },
    })
</script>

指令

v-bind:
v-bind: == :
v-bind:或:绑定属性名，单向数据绑定
v-on:事件类型
v-on: == @ 绑定事件（事件类型一定不要加on）
v-on: 或 @ 绑定事件
v-for 遍历数组，对象，字符串，指定次数

<body>
    <div id="app">
        <hr>
        <!-- 在同一界面使用多个v-for，不报错的解决：
              使用索引加上一个唯一值-->
          <!-- item拿到的值接收  arr循环的数组   key="index+item"绑定唯一值-->
        <h1 v-for="(item,index) of arr" :key="index+item"> 
            {{item}}-----------{{index}}
        </h1>
        <hr>
        <h1 v-for="(item,index) of objs" :key="index">
            {{item}}---------{{index}}
        </h1>
        <hr>
        <!--(item)若只有一个值可以不写括号-->
        <h3 v-for="(item) of 5" :key="item">
            {{item}}
        </h3>
</body>
<script src="./vue.js"></script>
<script>
   var vm = new Vue({
        data() {
            return {
                obj:{},
                arr:[11,22,33,44,55],
                objs:{
                    userName:"张三",
                    age:18,
                    sex:"男"
                },
                arrObj:[
                    {
                        userName:"张三",
                        age:18,
                        sex:"男",
                        schNum:202201
                    },
                    {
                        userName:"李四",
                        age:20,
                        sex:"女",
                        schNum:202202
                    }
                ],
            }
        },
</script>

蓝搜香菇

关注

11
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
Vue（1）

（注：不要使用箭头函数,搭建脚手架（vue-cli）后，必须使用函数式）// 注：尽量不要使用箭头函数，否则拿取不到data的数据。// data用于定义变量的集合,通常与插值提供。// 2.data(){return{}}函数式。data( ){return{ }}函数式。v-bind:或:绑定属性名，单向数据绑定。// 注：函数名称不要与变量名称一致。// 取消Vue启动时出现的提示。// 创建一个新的实例化Vue。// 1.data:{}对象式。// el绑定创建的容器。data:{ }对象式。
复制链接

扫一扫