Vue入门-Vue.js最基本核心功能的实现-指令组件

时间：2023-04-02 12:44:41 HTML

【上次我们在demo项目中创建了第一个学习Vue.js的HelloVue.vue文件】(https://segmentfault.com/a/11...)这篇文章介绍了Vue的一些最基本最核心的基础功能。它们来自Vue官方文档的介绍部分。如果你不明白我的介绍，可以跳转到原文档寻找答案。本文包含以下Vue.js功能的最基本实现代码：*注意是在项目中，与官方文档略有出入。v-bind绑定元素属性条件和循环处理输入、事件监听组件v-bind绑定元素属性vue.js提供了一系列特殊属性，它们以v-为前缀，称为指令（directive）。不同的指令将特殊的响应行为应用于渲染的DOM。正如我们上次讨论的，Vue中的声明式渲染让组件对象自动响应，而指令提供了更多响应式操作的可能性。返回到v-bind命令html代码：悬停以查看消息。

v-bind:title="hover_message"：实时绑定元素的title属性到hover_message。用v-bind绑定属性后，属性的值会实时响应变量的变化。js代码：exportdefault({data(){return{hover_message:'pageisloadedat:'+newDate().toLocaleString()}}})渲染效果：我们可以试试响应式效果，按F12打开开发者模式，在控制台修改hover_message的值.在控制台输入如下代码改变hover_message的值：$vm0.hover_message="reactive"响应后的渲染效果：可见v-bind绑定后的属性是响应式的。条件v-if是绑定元素可见性的条件指令。html代码Nowyouseemejs代码exportdefault({data(){return{seen:false}}})当seen的值为false时，组件会not不会渲染span元素。而且我们可以发现它的作用类似于display:hiddenfromtherenderedelement，对于元素是不可用的。在浏览器上渲染的HTML元素代码

和之前一样，我们在控制台把seen的值改成true后：$vm0.seen=true元素响应式渲染：而且渲染出来的html代码是没有Any的v-if特殊属性。浏览器上渲染的HTML元素代码Nowyouseeme

循环v-for指令可以绑定一个数据数组来渲染一个item列表html代码：

js代码：exportdefault({data(){return{todos:[{text:'LearnJavaScript'},{text:'LearnVue'},{text:'Thewholecowproject'}]}}})渲染元素：虽然官方文档给出的例子中没有v-bind:key命令，但其实我们需要同时为我们的绑定元素绑定一个关键元素。如果我们不绑定键元素，将出现以下异常：迭代中的元素期望具有“v-bind:key”指令。这个key是为了帮助Vue.js区分和检测这个数组数据的变化等，用于响应式渲染。事件侦听器v-on指令用于向元素添加事件侦听器并绑定已定义的方法。html代码：

反转消息js代码：exportdefault({data(){return{userInput:'Falaoviara',}},methods:{reverseMessage(){this.userInput=this.userInput.split('').reverse().join('')}}})渲染元素：点击按钮后：可以看到点击后执行了js中定义的方法，同时段落元素中的textcontent也响应式渲染成预留内容。这里还要提一点，组件中的方法需要定义在methods:{}对象中才能正常执行。输入的双向绑定双向绑定是项目中的常见用例，使用Vue.js中的v-model命令可以轻松实现。html代码：

js代码：exportdefault({data(){return{msg:'Falaoviara',}}})渲染这时候我们在输入框中输入内容，上面的段落元素是实时响应更新。组件化组件系统是Vue的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立且通常可重用的组件构建大型应用程序。仔细想想，几乎任何类型的应用界面都可以抽象成一棵组件树：组件树示例图，Vue.js提供了组件定义。在本文中，我将展示两种定义方式：在组件文件中定义一个自定义组件，并引用另一个新组件，并在组件文件中引用定义：js代码（注意：该组件不需要定义在导出中，因为它不需要暴露给外部上下文）从'vue'Vue.importVue.component('todo-item',{props:['todo'],template:'

'})其中'todo-item'是我们自定义组件的名称，您可以使用todo-item标签在html代码中呈现它。props是组件自定义属性的数组，用于以属性键的形式向自定义组件传递值。模板是组件的html代码。这样定义一个自定义组件后，我们就可以在html代码中引用并渲染这个组件了。HTML代码：数组数据：groceryList:[{id:0,text:'Vegetables'},{id:1,text:'Cheese'},{id:2,text:'Anythingotherpeopleeat'}]这样的自定义列表组件写的不错。渲染的元素当然是在实际项目开发中，（虽然没有Vue项目developed,Butinmyjudgement),这种定义组件的方式用的会比较少，不如用第二种方式来定义自定义组件。新建一个组件文件：Todo.vue:保存后在我们需要引用的组件文件中添加如下代码：js代码：importTodofrom'../sub/Todo'//导入新创建的组件exportdefault({components:{//公开我们引用的子组件（自定义组件）Todo}})HTML代码：渲染后的效果与文件中的定义一致以上为核心Vue.js的基本功能。在掌握了这些功能的使用之后，你会接触到更多其他的高级功能。如果您觉得本文对您有帮助，请点赞、收藏、评论，关注我并期待后续内容，共同学习成长。