1. vue 的引入:
- cdn:
- <!-- 开发环境版本, 包含了用帮助的命令行警告 -->
- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
- <!-- 生产环境版本, 优化了尺寸和速度 -->
- <script src="https://cdn.jsdelivr.net/npm/vue"></script>
- js:
- <!-- 开发环境版本, 包含了用帮助的命令行警告 -->
- <script type="text/javascript" src="js/vue.js"></script>
- <!-- 生产环境版本, 优化了尺寸和速度 -->
- <script type="text/javascript" src="js/vue.min.js"></script>
2 . 实例的重要参数:
data: 数据都放在 data 中, data 中的数据会在 html 结构中对应的地方响应
- <p id="app1"> 绑定内容 1:{{ message1 }}</p>
- var app1 = new Vue({
- el:"#app1",
- data:{
- message1:"内容 1",
- message2:"内容 2"
- }
- })
methods:'方法的意思', 里面存放一些方法
- <p id="app1" @click="funGo"> 绑定内容 1:{{ info }}</p>
- // 点击执行方法 funGo --> 打印 "内容"
- var app1 = new Vue({
- el:"#app1",
- data:{
- info:"内容"
- }
- methods:{
- funGo:function(){
- console.log(this.message1); //this 指向 Vue 本身 (也就是变量 app1)
- }
- }
- })
watch: 监听数据, 当数据发生变化时候, 可以调用函数
- <p id="app1"> 绑定内容 1:{{ info }}</p>
- var app1 = new Vue({
- el:"#app1",
- data:{
- info:"内容"
- },
- methods:{
- funGo:function(){
- this.info ++;
- console.log(this.info); //this 指向 Vue 本身 (也就是变量 app1)
- }
- },
- watch:{
- 'info':function(val,oldVal){ // 监听 data 中的数据 info 的变化, 当 info 发生变化时打印 val 和 oldVal
- console.log(val,oldVal); //val - 改变后的值; oldVal - 改变之前的值
- }
- }
- })
3 . 模板指令:
html 和 vue 对象的粘合剂
小结:
new 一个 Vue 对象的时候可以设置它的属性, 其中最重要的包括 el,data,methods,watch 其中 data 代表 vue 对象的数据, methods 代表 vue 对象的方法, watch 设置了对象监听的方法 vue 对象里的设置通过 html 指令进行关联响应
重要指令:
v-text 渲染数据
v-if 控制显示
v-on 绑定事件
v-for 循环渲染
数据渲染: v-text v-html {{ }}
- <p id="app1"> 绑定内容 1:{{ message1 }}</p>
- <p v-text="info"></p>
- <p v-html="info"></p> // 保留 html 结构
判断 / 控制模板显示与影藏: v-if v-show
- 区别:
- v-if 直接不渲染
- v-show 是渲染了以后通过 display:none; 来影藏
- <p id="app" v-if="isSeen">abc</p>
- // 表达式 isSeen 的值为 true 时, p 标签显示, isSeen 为 false 时, p 标签影藏
- var app = new Vue({
- el:"#app",
- data:{
- isSeen:false
- }
- })
渲染循环列表: v-for
- <ul id="app">
- <li v-for="item in items">
- <!--item 为 items 中的每一项 -->
- <p v-text="item.label"></p>
- </li>
- </ul>
- var app = new Vue({
- el:"#app",
- data:{
- items:[
- {label:"apple"},
- {label:"banana"}
- ]
- }
- })
- ==>
- .apple
- .banana
事件绑定: v-on 缩写为 @
- <button v-on:click="funGo"> 点击 </button> // 点击时调用 vue 的方法中的 funGo 方法
- <button @click="funGo"> 点击 </button> // 简写形式
- var app1 = new Vue({
- el:"#app1",
- data:{
- info:"内容"
- },
- methods:{
- funGo:function(){
- this.info ++;
- console.log(this.info); //this 指向 Vue 本身 (也就是变量 app1)
- }
- },
- watch:{
- 'info':function(val,oldVal){ // 监听 data 中的数据 info 的变化, 当 info 发生变化时打印 val 和 oldVal
- console.log(val,oldVal); //val - 改变后的值; oldVal - 改变之前的值
- }
- }
- })
属性事件绑定: v-bind 绑定标签中的 id , class , src 等等... 缩写为:
- <img v-bind:src="imgSrc">
- <img :src="imgSrc">
- // 常用的 class 可以简写
- <div :class="{ red:isRed }"></div>
- <div :class="[classA,classB]"></div>
- <!--isB 为 true 时 classB 存在, 为 false 时不存在 -->
- <div :class="[classA,{ classB:isB , classC:isC }]"></div>
单次循环插值: v-once
- <p v-once id="app1"> 这个内容将不会改变:{{ message }}</p>
- // 渲染一次后不在绑定
- var app1 = new Vue({
- el:"#app1",
- data:{
- message:"内容"
- }
- })
原始 html:v-html
- <p > 内容:{{ rawHtml }}</p>
- <p > 内容:<span v-html="rawHtml"></span></p> // 识别 html 标签
- ==>
- 内容:<span style="color:red">hello</span>
- 内容: hello
4 . 实例中的前缀 $
- $data $el $watch
- var data = { a: 1 }
- var vm = new Vue({
- el: "#app",
- data: data
- })
- // 其中
- vm.$data === data //true
- vm.$el === document.getElementById("app");
- //$watch 是一个实例方法
- vm.$watch('a',function(newValue, oldValue){
- // 这个回调将在 vm.a 改变后调用
- })
5 . 值中的 JavaScript 表达式
- code
- <p>{{ num + 1 }}</p>
- <p>{{ ok ? "yes" : "no" }}</p>
- <p>{{ message.split('').reverse().join('') }}</p>
- <p b-bind="'item' + num "></p>
- // 每个绑定只能包含单个表达式
- // 以下例子不会生效
- {{ var a = 1 }} // 这是语句, 不是表达式
- {{ if (ok) { return message} }} // 流控制语句也不会生效, 请使用三元表达式
- ------- end -------
来源: http://www.bubuko.com/infodetail-2658574.html