一: 认识
这是一个渐进式的 JS 框架, 所谓渐进式就是只我们不用讲 vue 内容整体全部把控, 学习一点就可以用一点.
这是一个非常简单且很优秀的 JS 框架, 它采用的是 mvvm 双向绑定模式.
mvvm 模式就是指 modelAndView viewAndModel, 当 view 一旦发生改变. viewModel 就可以监听到, model 就可以进行更改, 然后又会被监听到, view 也进行响应的改变, 实现双向绑定.
二: 入门
首先在官网下载 vue.js
1. 引入
- <!-- 引入 vue 用相对路径 -->
- <script src="vue/vue.js"></script>
2. 准备挂载的标签
1 <div id="app"></div>
3. 创建 vue 对象
data: 数据 (vue 对象的所有数据都写在这里)
methods:vue 对象的方法 (可以有多个)
this 指的就是这个 vue 对象, JS 与表达式中都可以调用这个方法
- <!-- 创建 vue 对象 -->
- <script>
- var App=new Vue({
- el:"#app" , // 挂载 可以使 id class 标签
- data:{ // 数据 可以是变量 对象 数组
- message:"愚人节快乐",
- student:{ // 可以用对象
- name:"苏苏",
- age:18
- },
- arr:["你","好"] // 可以用数组
- },
- methods:{ // 方法 记着这里有 s
- say(msg){
- return this.student.name+msg
- }
- }
- });
- </script>
4. 在挂载的标签中取值
表达式 {{vue 对象中的属性}}
- <div id="app">
- {{message}}====
- {{student.name}}====
- {{arr[0]}}{{arr[1]}}====
- {{say("愚人节快乐")}}
- </div>
结果输出
愚人节快乐 ==== 苏苏 ==== 你好 ==== 苏苏愚人节快乐
三, 表达式
1. 表达式 {{vue 对象中的属性}}
2. 加减乘除 (当操作的字符串时, 加编程字符串的拼接, 减乘除不变), 三目运算, 对象操作, 数组操作, 还可以调用方法
- <div id="app">
- {{employee.name}}===
- {{num1+num2}}===
- {{num1+num3}}=== <!-- 字符串拼接 -->
- {{sex?"男":"女"}}===
- {{arr[0]}}
- </div>
- <script>
- // 对象操作准备
- employee={
- name:"春天",
- age:18
- }
- // 数组操作准备
- arr=["张","三"]
- // 创建 vue 对象
- new Vue({
- el:"#app",// 挂载
- data:{
- employee:employee,
- num1:8,
- num2:5,
- num3:"6",
- sex:true,
- arr:arr
- }
- })
- </script>
3. 结果
春天 === 13=== 86=== 男 === 张
四: 指令
vue 指定的一些特殊的属性 : v - 属性名
1.v-text: 直接展示, 不会解析标签
2.v-html: 直接展示 (解析 HTML 标签)
3.v-for: 循环 (数组, 对象, 数字, 字符串)
v: 值 i: 下标 k: 属性名
- v-for="(v,i) in 数组"
- v-for="(v,k,i) in 对象"
4.v-show: 有内容, 只是隐藏 (display="none")
5.v-if: 不满足条件的直接就没有了
- v-else-if=""
- v-else
- <div id="app1" v-text="textArl"></div>
- <hr/>
- <div id="app2" v-HTML="htmlArl"></div>
- <hr/>
- <div id="app3" v-show="showArl"> 有没有 </div>
- <hr/>
- <div id="app">
- <div v-if="age<19"> 小于 19</div><!-- 不满足就是真的没有 div-->
- <div v-else-if="age>=19 && age<56"> 诶 </div>
- <div v-else > 大于 </div>
- </div>
- <script>
- new Vue({
- el:"#app",
- data:{
- textArl:"<h1 > 这是文本 </h1>",// 没有解析标签
- htmlArl:"<h1 > 这是文本 </h1>",// 解析了标签
- showArl:false,// 不是真正的没有, 只是隐藏了
- age:19
- }
- })
- </script>
6.v-bind: 绑定属性 (属性中使用 vue 的表达式)
标准写法: <img v-bind:src="src" />
简写形式 (建议): <img :src="src" />
绑定对象属性: <img v-bind="img" />
- <div id="app">
- <!-- 标准格式 -->
- <img v-bind:src="src" v-bind:alt="alt">
- <!-- 简便格式 -->
- <img :src="src" :alt="alt">
- <!-- 操作对象 -->
- <img v-bind="imgs"/>
- </div>
- <script>
- new Vue({
- el:"#app",
- data: {
- src: "img/s1.png",
- alt: "没有啊",
- imgs:{
- src:"img/s1.png",
- alt: "没有啊",
- }
- }
- })
- </script>
7.v-model: 双向绑定 (只能用到 input,select,textarea 中)
- <div id="app">
- <input type="radio" name="sex" v-model="sex" value="true"/> 男
- <input type="radio" name="sex" v-model="sex" value="false"/> 女
- {{sex}}
- <hr/>
- <input type="checkbox" v-model="hobbys" value="1"/> 篮球
- <input type="checkbox" v-model="hobbys" value="2"/> 足球
- <input type="checkbox" v-model="hobbys" value="3"/> 排球
- <input type="checkbox" v-model="hobbys" value="4"/> 棒球
- {{hobbys}}
- <hr/>
- <textarea v-model="textArea"></textarea>
- {{textArea}}
- <hr/>
- <select v-model="city">
- <option value="1">ss</option>
- <option value="2">ww</option>
- </select>
- {{city}}
- <hr/>
- <select>//v-for 和 v-bind 结合
- <option v-for="v in citys" :value="v.id">{{v.name}}</option>
- </select>
- <hr/>
- </div>
- <script>
- new Vue({
- el:"#app",
- data:{
- sex:false,
- hobbys:[1,4],
- textArea:"愚人节快乐",
- city:"1",
- citys:[{id:1,name:"ww"},{id:2,name:"ss"},{id:3,name:"爱琴海"}],
- }
- })
- </script>
8.v-on: 事件绑定
- <input type="button" v-on:click="say()" />
- <input type="button" v-on:click="say" />
简写形式:
- <input type="button" @click="say" />
- <div id="app">
- <!--<input type="button" value="点我" v-on:click="say">-->
- <!--<input type="button" value="点我" v-on:click="say()">-->
- <input type="button" value="点我" @click="say">
- </div>
- <script>
- new Vue({
- el:"#app",
- data:{},
- methods: {
- say() {
- alert(0)
- }
- }
- })
- </script>
五, 组件 (自定义标签)
格式 组件名 + 模块
1. 全局组件
- Vue.component("mytag",{
- template:"<h1 > 自定义全局标签 </h1>"
- })
- new Vue({
- el:"#app",
- })
2. 局部组件
- <div id="app">
- <mytag></mytag>
- </div>
- <script>
- new Vue({
- el:"#app",
- components:{
- mytag:{
- template:"<h2 > 这是一个局部标签 </h2>"
- }
- }
- })
- </script>
3. 注意事项
1. 先定义组件, 再挂载
2. 组件的模板必需要一个根标签
3. 命名如果是驼峰 (建议小写) myTag -> <my-tag>
来源: http://www.bubuko.com/infodetail-3008128.html