vue学习一v-bind和v-on

最新推荐文章于 2024-05-20 17:02:17 发布

m0_57199856

最新推荐文章于 2024-05-20 17:02:17 发布

阅读量239

点赞数

分类专栏： vue学习文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/m0_57199856/article/details/124851234

版权

vue学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. vue引入

    <!-- 路径不能写./的形式 用//的形式 -->
    <script type="text/javascript" src="/js/vue.js"></script>
</head>
<body>
    <script type="text/javascript">
        Vue.config.productionTip = false;
    </script>

2. 创建Vue对象

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
new vue({})
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
如插值{{}}
root容器里的代码被称为【Vue模板】；
Vue实例和容器是一一对应的；
真实开发中只有一个Vue实例，并且会配合着组件一起使用；
{{xxx}}中的xxx要写js表达式表达式会生成一个值，且xxx可以自动读取到data中的所有属性；
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- //差值{{}} -->
        <h1>hello,{{name}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        //创建vue实例
        const x = new Vue({
            el: '#root', //el用于指定当前vue实例为哪个容器服务 值为css选择器(getElementbyId)
            data: {  //用于存储数据 
                name: 'aaa'
            }
        })

vue模板语法两大类

vm上和vm的原型上的所有属性和方法模板里都可以直接用

<button @click="ishot=!ishot">切换天气</button>

这里可以看出事件里写了一句代码这里用到的属性在vm里而这句话在模板里所以可以直接用!!!

【插值语法】{{}}【一个】

【指令语法】指令（以v-开头的自定义标签属性）【很多】

插值语法：

功能：用于解析标签体内容
写法：{undefined{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性

重点:{{}}里可以读取到
1. vm里data的数据
2. 计算属性 computed里计算出来的
3. v-for里的形参
4. 函数的返回值 add() 但是要写()表示调用

指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，要加引号且可以直接读取到data中的所有属性
备注：写了v-bind: 后面的属性=“这里面的东西有效” 而不是属性名本身是属性值
注意: v-bind可以简写为: v-model可以简写为vlue=
v-bind :绑定了一个属性就vue实例就可以操作这个属性
这里面写函数可以不写()但是不写无法得到参数event
—

m0_57199856

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习一v-bind和v-on

1. vue引入  <script type="text/javascript" src="/js/vue.js"></script></head><body> <script type="text/javascript"> Vue.config.productionTip = false; </script>2. 创
复制链接

扫一扫