①. vue入门概述
- ①. vue的概述 ①. Vue:渐进式JavaSctipt框架 ②. https://cn.vuejs.org/v2/guide/
- ②. 入门代码展示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div>{{msg}}</div> <div>{{1 + 2}}</div> <div>{{msg + '' + 123}}</div> <div>{{msg + "" + 123}}</div> </div> <script src="../js/vue.js"></script> <script> var appel=document.getElementById("app"); var vm=new Vue({ el:'#app',//元素的挂载位置(值可以是css选择器或者DOM元素) //el:appel data:{ //模型数据:值是一个对象 msg:'xiaozhi' } }); </script> </body> </html>
②. 插值表达式
- ①. 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,Mustache 标签将会被替代为对应数据对象上属性的值。无论何时,绑定的数据对象上属性发生了改变,插值处的内容都会更新
- ②. Vue.js 都提供了完全的 JavaScript 表达式支持。
<font color="blue">{{ number + 1 }} <font color="blue">{{ ok ? 'YES' : 'NO' }} <font color="blue">{{ reversedMessage() }}插值表达式可以定义方法 {{scope.row.TASKSTATUS == '0' ?"未审批" : scope.row.TASKSTATUS=='1' ? "已通过" : '已驳回'}}
③. 如下不会生效
<!-- 这是语句,不是表达式 --> {{ var a = 1 }} <!-- 流控制也不会生效,请使用三元表达式 --> {{ if (ok) { return message } }}
③. 指令(格式:以v-开始(比如:v-cloak))
- ①. 前言:出现闪烁问题:
<div id="app"> <!-- 在网速很慢的情况下,会先出现{{msg}},后出现测试--> {{msg}} </div> <script src="../js/vue.js"></script> <script> var vm=new Vue({ el:'#app', data:{ msg:"测试" } }); </script>
②. 关于指令详解:
③. 代码展示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> [v-cloak]{ display:none; } </style> </head> <body> <div id="app"> <div v-cloak>{{msg}}</div> <div v-text="msg"></div> <div v-html="msg1"></div> <div v-pre>{{msg1}}</div> </div> <script src="../js/vue.js"></script> <script> var vm=new Vue({ el:'#app',//元素的挂载位置(值可以是css选择器或者DOM元素) //el:appel data:{ //模型数据:值是一个对象 msg:'hello xiaozhi', msg1:'<h1>v-html</h1>' } }); </script> </body> </html>