-
<div id="root"> <div v-bind:title="title">hello world</div> //属性绑定 (js表达式) <div :title="title">hello world</div> //v-bind简写为':' <input v-model="content"/> //双向绑定 (数据和页面一同改变) <div>{{content}}</div> </div> <script> new Vue()({ el:"#root", data:{ title:"this is hello world", content:"this is content" } }) </script>查看全部 -
{{msg}}插值表达式
(a)=>{b}箭头函数(a参数，b返回值）
<div id="root"> <div v-text="content"></div> <div v-html="content"></div> //v-html不会转义 <div v-on:click="handleClick"</div> //绑定点击事件 <div @click="handleClick"</div> //v-on简写为@ </div> <script> //创建Vue实例 new Vue()({ el:"#root", //element绑定DOM节点 data:{ content:"<h1>hello</h1>" }, method:{ handleClick:function(){ this.content = "world" //点击更改数据 } } }) </script>查看全部 -
<div id="root">{{msg}}</div> <script> //实例 new Vue()({ el:"#root", //挂载点 template: '<h1>hello {{msg}}</h1>', //模板内容 data:{ msg:"world" //数据 } }) </script>查看全部 -
<div id="root">{{msg}}</div> <script> //创建Vue实例 new Vue()({ el:"#root", //element绑定DOM节点 data:{ msg:"hello world" } }) </script>查看全部 -
v-on = @ (eg: @click
属性绑定：v-bind = : (eg: :title -- 鼠标移过去有解释
双向数据绑定：v-model
查看全部 -
computed 计算属性
watch 监听器
查看全部 -
vue只会处理挂载点里面的内容！
挂载点：el: '#app'
模板：template: '<h1>hello world</h1>'
查看全部 -
v-if
v-for
查看全部 -
循环
v-for="item of list" :key="index"
v-show v-if 按钮是否显示 变量值 true/false
查看全部 -
v-on:click
查看全部 -
@代替v-on：事件绑定，vue3.x使用v-on=""取代v-on:
：代替v-bind：属性绑定，vue3.x使用v-bind=""取代v-bind：
v-model：数据双向绑定，vue3.x使用v-model=""取代v-model:
查看全部 -
v-on:可以缩写为@，进行数据绑定
查看全部 -
挂载点、模板、实例
查看全部 -
1-1课程介绍
基础知识 （版本现已在2.5以上）
案例实践
todolist
vuecli项目构建工具的使用
再开始todolist功能
查看全部 -
还不错哦
查看全部 -
<script src="./vue.js"></script>
查看全部
举报
0/150
提交
取消