江西专业网站建设,网站开发实验心得,集团响应式网站建设,ctoc网站有哪些1、插值表达式属性绑定
!--template展示给用户#xff0c;相当于MVVM模式中的V--
templatediv classfirst_div//插值表达式p{{ message }}/p//这里的参数是从父组件的template里传过来的p{{data_1}}/p…1、插值表达式属性绑定
!--template展示给用户相当于MVVM模式中的V--
templatediv classfirst_div//插值表达式p{{ message }}/p//这里的参数是从父组件的template里传过来的p{{data_1}}/p//v-开头的是vue中的指令使用v-bind来绑定属性单向绑定只能将model中的数据传给绑定的属性可以动态改变属性值span v-bind:titledream学好vue不是梦/span/div
/template!--script模块是m和vm结合的地方--
script
export default {name: greeting.vue,//函数data() {//return返回的是一个对象可以是后端返回的数据return {message:这是一个插值表达式的值,dream:小目标//把这个绑定为标签属性值用到v-bind:}},props:{data_1:String}
}
/script
!--设置元素样式的模块--
style scoped
.first_div p{color: red;
}
/style
v-bind 缩写
div idappprea v-bind:hrefurl菜鸟教程/a/pre/divscriptnew Vue({el: #app,data: {url: http://www.runoob.com}})
/script
在这里 href 是参数告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
Vue.js 为两个最为常用的指令提供了特别的缩写
!-- 完整语法 --
a v-bind:hrefurl/a
!-- 缩写 --
a :hrefurl/a
2、v-if和v-show
!-- v-if 指令将根据表达式 ifgao 的值(true 或 false )来决定是否插入 p 元素,会对DOM的新建和删除操作增加前端开销 --p v-ififgao我是最帅的人/p
!-- v-show 每次不会重新删除或者创建只是改变了元素的可见属性display:none一般会使用v-show而不是v-if--p v-showifgao我是最帅的人/p
!-- v-if\v-else-if\v-else的用法--p v-ifage70{{username}},老人家你该休息了/pp v-else-ifage18{{username}},欢迎光临请开始吃鸡/pp v-else{{username}},小朋友你的作业写完了吗/pdata() {return {message: 这是一个插值表达式的值,dream: 小目标,ifgao:true,username:帅哥,age:16}
3、v-on_element_ui v-on 指令它用于监听 DOM 事件:
a v-on:clickdoSomething
在这里参数是监听的事件名。
v-on
templatediv classfirst_div
!-- v-on:可以缩写成--p v-on:clickusername大佬们{{username}},我是v-on~/pp clickusername大佬们menmen{{username}},我是v-on~的缩写/pp v-on:clickchangeusername{{username}},我是v-on的函数变量~/p/div
/templatescript
export default {name: greeting.vue,data() {return {message: 这是一个插值表达式的值,dream: 小目标,ifgao:true,username:帅哥,age:16}},props:{data_1:String},methods:{changeusername:function (){this.usernamedalao}}created() {console.log(实例创建之后能够获取到this);console.log(username为,this.username);},mounted() {console.log(vue实例挂载到dom之后)}
}
/script
v-on 缩写
!-- 完整语法 --
a v-on:clickdoSomething/a
!-- 缩写 --
a clickdoSomething/a
4、v-for table
trth v-for(header_name,key) in project_header v-bind:keykey{{ header_name }}/th
/tr
tr v-for(item,key) in projects v-bind:keykeytd{{ item.name }}/tdtd{{ item.leader }}/tdtd{{ item.app_name }}/td
/tr
/table
/template
script
export default {name: projectlist,data(){return{project_header:[项目名称,负责人,应用名称],projects:[{name:吊炸天的项目,leader:飞天小子,app_name:很牛逼的应用},{name:非常厉害的项目,leader:小旋风,app_name:很神秘的应用},{name:很完美的项目,leader:阿童木,app_name:666的应用}]}}
}
/script
5、v-bind:使用v-bind来绑定属性
单向绑定只能将model中的数据传给绑定的属性
v-model:
双向绑定既能将model中的数据传给绑定的属性也能将绑定的属性值传给model
只能在input,textarea,select元素中使用 1、插值表达式1 子组件中使用{{ msg}}插值在script的export default中使用data(){return{msg:}}传值 2、插值表达式2 父组件中传入msg,在子组件中使用{{ msg}}插值在script的export default中使用props:{msg:String} 3、创建全局组件在main.js文件中创建 import loginNew from /components/loginNew;
//创建全局组件
Vue.component(login-New,loginNew);//这样就不用在父组件内导入(import)和声明components)子组件了
然后在App.vue根组件中调用就可以了不需要再去导入和声明了
login-New/login-New
6、插槽
6.1 普通插槽
1、在父组件中直接调用子组件的标签是可以渲染出子组件的内容如果在子组件标签中添加了内容父组件就渲染不出来了
2、如果父组件调用的子组件标签中和子组件中的插槽中都有文本内容那么父组件中的会覆盖子组件插槽中的内容
index.js 以父组件为loginnew子组件为hello-world为例
!--父组件loginnew.vue-
hello-world/hello-world
hello-world这是个hello-world插槽位/hello-world
!--如果想要渲染出父组件中调用子组件标签中的内容就要在子组件中添加插槽--
!--子组件hello-world.vue文件--
!--如果父组件调用的子组件标签中和子组件中的插槽中都有文本内容那么父组件中的会覆盖子组件插槽中的内容--
slotphello-world我们一起学猫叫/p/slot
6.2 具名/命名插槽
父组件loginNew.vue
templatedivel-form :modelruleForm status-icon refruleForm label-width70px classdemo-ruleForm:label-positionlabelPositionel-form-item label用户名 propusernameel-input typeusername v-modelruleForm.username autocompleteoff/el-input/el-form-itemel-form-item label密码 proppasswordel-input typepassword v-modelruleForm.password autocompleteoff/el-input/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(ruleForm)提交/el-buttonel-button clickresetForm(ruleForm)重置/el-button/el-form-item/el-form!-- 如果父组件调用的子组件标签中和子组件中的插槽中都有文本内容那么父组件中的会覆盖子组件插槽中的内容--!-- hello-world这是个hello-world插槽位/hello-world--!-- 如果父组件调用的子组件标签中和子组件中的插槽中都有文本内容那么父组件中的会覆盖子组件插槽中的内容--!-- hello-world/hello-world--hello-world!-- 方法二 命名插槽--!-- 在vue2.6之前版本--p slotpart1一起喵喵喵/p!-- 在vue2.6之后版本--template v-slot:part2p在你面前撒个娇/p/template!-- v-slot:可以简写成# --template #part3p还是喵喵喵喵/p/template!-- 插槽作用域:父组件调取子组件的插槽内部要获取子组件的属性--!-- 2.6 之前--p slotpart4 slot-scopescope{{ scope.user }}我得心脏砰砰跳/ptemplate slotpart5 slot-scopescopep{{ scope.user }}我得心脏砰砰跳aaaaaa/p/template!-- 2.6 之后--template v-slot:part6scopep{{scope.user}}都是你的味道/p/templatetemplate v-slot:part7{user}p{{user}}都是你的味道/p/template/hello-world/div
/templatescript
export default {name: loginNew,data() {return {username: daxiao,password: 123456,labelPosition: right,ruleForm: {username: 111,password: 222,}}},
}
/scriptstyle scoped
.el-form {width: 350px;margin: 50px auto;
}
/style
子组件HelloWorld.vue
templatediv classhelloh1{{ msg }}/h1h{{ msg1 }}/hp这是一个hello-world页面/pdivel-imagestylewidth: 300px; height: 200px:srcurlfitcover/el-image/div!-- 第一种方式--!-- slot/slot--!-- 第二种方式--slotp我们一起学猫叫/p/slot!-- 第三种方式 命名插槽--slot namepart1/slotslot namepart2/slotslot namepart3/slot!-- 插槽作用域--slot namepart4 :userusername/slotslot namepart5 user六啊/slotslot namepart6 user七啊/slotslot namepart7 user八啊/slot!-- slot /slot--/div
/templatescript
// import axios from axios;
import {dogs} from ../api/apiexport default {name: HelloWorld,props: {msg: String},data() {return {url: ,username: 木子}},mounted() {//方法一不推荐// axios.get(https://dog.ceo/api/breeds/image/random)// //如果请求成功就会执行.then回调函数// .then(function (response) {// console.log(data:,response.data)// console.log(response:,response)// //此时的this指的是当前函数的应用// this.urlresponse.data.message// })// //如果请求失败就会执行.catch回调函数// .catch(function (err) {// console.log(err)// });// axios.get(https://dog.ceo/api/breeds/image/random)// //如果请求成功就会执行.then回调函数// //方法二使用箭头函数// .then(response {// console.log(data:, response.data)// console.log(response:, response)// //此时的this指的是当前函数的应用// this.url response.data.message// })// //如果请求失败就会执行.catch回调函数// .catch(function (err) {// console.log(err)// });dogs()//如果请求成功就会执行.then回调函数//方法二使用箭头函数.then(response {console.log(data:, response.data)console.log(response:, response)//此时的this指的是当前函数的应用this.url response.data.message})//如果请求失败就会执行.catch回调函数.catch(function (err) {console.log(err)});}
}/script!-- Add scoped attribute to limit CSS to this component only --
style scoped/style
6.3 作用域插槽
