博客做网站,赣州新闻发布会,外包公司怎么样,swf做网站头本章为超级浓缩版,文章过于短,方便复习使用哦~ 文章目录 1. 简单引入 vue.js2. 指令2.1 事件绑定指令 v-on (简写 )2.2 内容渲染指令2.3 双向绑定指令 v-model2.4 属性绑定指令 v-bind (简写 : )2.5 条件渲染指令2.6 循环指令 v-for 3. vue 其他知识3.1 侦听器 watch3.2 计算属… 本章为超级浓缩版,文章过于短,方便复习使用哦~ 文章目录 1. 简单引入 vue.js2. 指令2.1 事件绑定指令 v-on (简写 )2.2 内容渲染指令2.3 双向绑定指令 v-model2.4 属性绑定指令 v-bind (简写 : )2.5 条件渲染指令2.6 循环指令 v-for 3. vue 其他知识3.1 侦听器 watch3.2 计算属性 computed3.3 过滤器 filters 4. axios 基本使用5. Vue 的组件5.1 当前文件使用5.2 全局组件5.3 自定义属性 props 6. 其他说明 1. 简单引入 vue.js
下载 vue.js : 安装 — Vue.js
div idapp!-- vue 控制的区域 --!-- 显示数据:{{}} --{{username}}
/div
!-- 导入vue.js --
script srclib/vue.js/script
script// 创建Vue实例对象var vm new Vue({// 指定要控制的区域el: #app,// 要渲染在页面上的数据data: {username: 张三}})
/script2. 指令
2.1 事件绑定指令 v-on (简写 )
.stop - 调用 event.stopPropagation()。.prevent - 调用 event.preventDefault()。.capture - 添加事件侦听器时使用 capture 模式。.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。.native - 监听组件根元素的原生事件。.once - 只触发一次回调。.left - (2.2.0) 只当点击鼠标左键时触发。.right - (2.2.0) 只当点击鼠标右键时触发。.middle - (2.2.0) 只当点击鼠标中键时触发。.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
button clickadd(1,$event)1/buttonadd(n, e) {// 打印数字console.log(n);// 事件: e
},2.2 内容渲染指令
v-textv-html插值表达式 {{ }}
p姓名:{{username}}/p
p v-textcover_text/p
p v-htmlred_p/p2.3 双向绑定指令 v-model
div idappselect v-modelcityoption value-请选择-/optionoption value1北京/optionoption value2上海/optionoption value3广州/optionoption value4深圳/option/select
/divlet vm new Vue({el: #app,data: {city: }
});2.4 属性绑定指令 v-bind (简写 : )
div idappinput typetext v-bind:placeholdertipUserNameinput typetext :placeholdertipPassworddiv :stylebackground-color: color ;width: 100%;height:100px此时背景颜色:{{color}}/div
/divvar vm new Vue({el: #app,data: {tipUserName: 请输入用户名...,tipPassword: 请输入密码,color: red}
});2.5 条件渲染指令
v-ifv-else-ifv-elsev-show
v-if vs v-show
一般来说v-if 有更高的切换开销而 v-show 有更高的初始渲染开销。因此如果需要非常频繁地切换则使用 v-show较好如果在运行时条件很少改变则使用 v-if 较好。
2.6 循环指令 v-for
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法其中 items 是源数据数组而 item 则是被迭代的数组元素的别名。
ul idexample-1li v-foritem in items :keyitem.message{{ item.message }}/li
/ulvar example1 new Vue({el: #example-1,data: {items: [{ message: Foo },{ message: Bar }]}
})3. vue 其他知识
3.1 侦听器 watch
div idappinput typetext classform-control v-modellinkp{{res}}/p
/divconst vm new Vue({el: #app,data: {link: ,res: },watch: {// link(newVal,oldVal){} 不建议link: {handler(newVal) {if (newVal ) return;$.get(https://www.escook.cn/api/finduser/ newVal, (response) {this.res response;});},// 页面加载时,就立即执行监听器immediate: true,// deep 对象的一些属性也能监听到deep: true}}
})3.2 计算属性 computed
div idappdivlabel forrgbrgb:/labelinput typetext namergb idrgb v-modelcolor/divdiv classbox :style{backgroundColor: rgb}/divinput typebutton value获取颜色信息 clickshow/divconst vm new Vue({el: #app,data: {r: 0,g: 0,b: 0,color: rgb(0, 0, 0)},computed: {// 计算属性定义时方法,使用时属性rgb() {// return reg(${this.r},${this.g},${this.b})return this.color}},methods: {show() {console.log(颜色: this.rgb);}},
});3.3 过滤器 filters
div idappinput typetext placeholder请输入... v-modeltextp{{text | changeText(1)}}/p
/divconst vm new Vue({el: #app,data: {text: },filters: {// 第一个参数永远是管道符前面的值changeText(val, id) {return val ----- id;}}
});4. axios 基本使用
引入 js 文件
script srchttps://unpkg.com/axios/dist/axios.min.js/script调用 axios 函数
axios({method: get,url: http://www.liulongbin.top:3006/api/getbooks
}).then((books) {this.bookContent books.data;
});5. Vue 的组件 该小节是在脚手架中完成的 5.1 当前文件使用
使用组件三大步骤 使用 import 语法导入需要的组件 import Left from /components/Left.vue使用 components节点注册组件 export default {components: {Left}
}以标签形式去使用刚才注册的组件 div classboxLeft/Left
/div拓展 的 注意事项。一般用来代替src目录。webpack.config.js
module.exports {resolve: {alias: {: path.join(__dirname,./src)}}
}5.2 全局组件
注意: 在 script标签 中的 components 注册的组件都是私有子组件只能在该组件中使用。
在 vue 项目的 main.js入口文件中通过 Vue.component()方法可以注册全局组件。示例代码如下:
// 1. 导入需要全局注册的组件
import Count from /components/Count.vue// 2. 注册组件
// 参数1: 字符串格式,表示组件名称
// 参数2: 需要被全局组成的组件(导入的组件)
Vue.component(MyCount,Count)5.3 自定义属性 props
props 是 “自定义属性” ,允许使用者通过自定义属性为当前组件指定初始值 【自定义属性的名字是封装者自定义的且合法的】
具体用法: Count.vue export default {// 自定义属性props: [init]// 数据源data() {return {count:0}}
}在另一个文件 Left.vue 引用 MyCount init9/MyCount注意:
props 中的数据可以 直接在模板结构中使用
templatedivpcount 的值: {{ init }}/p/div
/templateprops 是 只读 的 props 结合 v-bind :init 是 其中数字 9 是数字 init 是 其中数字 9 是字符串 templatediv classleft-containerh3Left 组件/h3hr /// 使用v-bind 绑定MyCount :init9/MyCount/div
/templateprops 和 数据源 关联 上面只是简单初始化,但是init 和 数据源中的 count 没有进行绑定 故还不完善 scriptexport default {// 自定义属性props: [init]// 数据源data() {return {// init 和 count 关联起来count:this.init}}}
/scriptprops 的 default 默认值 在声明自定义属性时可以通过 default 来定义 属性的默认值 示例代码如下 export default {// 自定义属性props: {init: {// 用 default 属性 定义属性的默认值default: 0}}
}6. 其他说明
Vue 基础语法前面基本已经概况更多知识请访问官网
介绍 — Vue.js
接下来的学习就是在脚手架中努力积累经验了。
因为 vue2 比较老、旧可以采取 vue-cli。
Gitee 代码地址 https://gitee.com/star-dream-f/vue2-study
