当前位置：首页 > Web前端 > HTML

Vue.js-Day01

时间：2023-04-02 18:55:09 HTML

本来是想学angular的，结果总是卡在最开始，受不了。换个框架就行，上vue吧！使用jquery需要引入具体的库，所以使用vue也是类似的，可以在头部引入我认为vue最重要的概念就是将value和DOM绑定在一起，将数据渲染成DOM有以下方法：1.文本插值{{message}}

varapp=newVue({el:'#app',data:{message:'HelloVue!'}})2.绑定到标签

鼠标悬停几秒可以在这里查看动态绑定的提示信息！

varapp2=newVue({el:'#app-2',data:{message:'Thepagewasloadedon'+newDate()}})这里，属性名类似tov-bind是一个（vue的）指令，这个指令的作用是：“保持这个元素节点的title属性和Vue实例的message属性一致”。在处理数据的时候，经常会用到if判断和循环，这些应用在vue1中也有使用。条件判断

现在你看到我了

varapp3=newVue({el:'#app-3',data:{seen:true}})2.循环

{{todo.text}}

varapp4=newVue({el:'#app-4',data:{todos:[{text:'LearnJavaScript'},{text:'LearnVue'},{text:'全牛项目'}]}})我们也可以给调用Vue实例方法的DOM绑定一个事件监听器：

{{message}}

反向消息varapp5=newVue({el:'#app-5',data:{message:'HelloVue.js!'},methods:{reverseMessage:function(){this.message=this.message.split('').reverse().join('')}}})双向数据绑定

{{message}}

varapp6=newVue({el:'#app-6',数据:{消息：'你好Vue！'}})component在Vue中，组件本质上是一个带有预定义选项的Vue实例，在Vue中注册组件很简单：//定义一个名为todo-item的新组件Vue.component('todo-item',{template:'

Thisisatodoitem

'})现在您可以使用它来构建另一个组件模板：

但是这会为每个todoitem渲染相同的文本，这看起来不太酷，我们应该可以把数据从父范围传递到子组件让我们修改组件定义来接受一个prop:Vue.component('todo-item',{//todo-item组件现在接受一个//“prop”，类似于自定义属性//这个属性叫做todo。props:['todo'],template:'

{{todo.text}}

'})现在，我们可以使用v-bind指令将待办事项传递给每个重复的组件：

Vue.component('todo-item',{props:['todo'],template:'

{{todo.text}}

'})varapp7=newVue({el:'#app-7',data:{groceryList:[{text:'Vegetables'},{text:'Cheese'},{text:'Anythingotherpeopleeat'}]}})

上一篇：可视化大屏项目：学生就业统计展示

下一篇：前端资源合集下载

Vue.js-Day01相关文章

最新推荐

猜你喜欢